前言
遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。
如本文有错或理解偏差欢迎联系我，会尽快改正更新！
如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。
本章涉及资源下载：
链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6
属性
animationType（动画类型） PropTypes.oneOf(['none', 'slide', 'fade'])
none：没有动画
slide：从底部滑入
fade：淡入视野
onRequestClose（被销毁时会调用此函数）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func
在 'Android' 平台，必需使用此函数
onShow（模态显示的时候被调用）function
transparent (透明度) bool
true时，使用透明背景渲染模态。
visible（可见性） bool
决定模态是否可见
onOrientationChange（方向改变时调用）PropTypes.func
在模态方向变化时调用，提供的方向只是 '' 或 ''。在初始化渲染的时候也会调用，但是不考虑当前方向。
supportedOrientations（允许模态旋转到任何指定取向）PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape'，'landscape-left'，'landscape-right']））
在iOS上，模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。
modal 基本使用
modal的使用很广泛，这边我们来看看怎么让视图以模态的形式展示：
export default class One extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
isModal:false
};
}
showModal() {
this.setState({
isModal:true
})
}
onRequestClose() {
this.setState({
isModal:false
});
}
render() {
return(
<View style={styles.container}>
{/* 初始化Modal */}
<Modal
animationType='slide' // 从底部滑入
transparent={false} // 不透明
visible={this.state.isModal} // 根据isModal决定是否显示
onRequestClose={() => {this.onRequestClose()}} // android必须实现
>
<View style={styles.modalViewStyle}>
{/* 关闭页面 */}
<TouchableOpacity
onPress={() => {{
this.setState({
isModal:false
})
}}}
>
<Text>关闭页面</Text>
</TouchableOpacity>
</View>
</Modal>
{/* 返回按钮 */}
<TouchableOpacity
onPress={() => {{
this.props.navigator.pop()
}}}
>
<Text>返回</Text>
</TouchableOpacity>
{/* 模态跳转 */}
<TouchableOpacity
onPress={() => this.showModal()}
>
<Text>模态跳转</Text>
</TouchableOpacity>
</View>
);
}
}
modal 使用 —— 指示器
这边我们再来做一个经常使用的功能 —— 指示器
export default class One extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
isModal:false
};
}
showModal() {
this.setState({
isModal:true
})
setTimeout(() => {
this.setState({
isModal:false
});
}, 1500)
}
onRequestClose() {
this.setState({
isModal:false
});
}
render() {
return(
<View style={styles.container}>
{/* 初始化Modal */}
<Modal
animationType='fade' // 淡入淡出
transparent={true} // 透明
visible={this.state.isModal} // 根据isModal决定是否显示
onRequestClose={() => {this.onRequestClose()}} // android必须实现
>
<View style={styles.modalViewStyle}>
<View style={styles.hudViewStyle}>
<ActivityIndicator style={styles.chrysanthemumStyle}></ActivityIndicator>
<Text style={styles.hudTextStyle}>加载中…</Text>
</View>
</View>
</Modal>
{/* 返回按钮 */}
<TouchableOpacity
onPress={() => {{
this.props.navigator.pop()
}}}
>
<Text>返回</Text>
</TouchableOpacity>
{/* 显示指示器 */}
<TouchableOpacity
onPress={() => this.showModal()}
>
<Text>显示指示器</Text>
</TouchableOpacity>
</View>
);
}
}
model示例效果
总结
从 modal 的源码可以看出，modal 其实就是使用了 绝对定位，所以当 modal 无法满足我们的需求的时候，我们就可以通过 绝对定位 自己来封装一个 modal 了，对吧，时间关系，这边就不讲了，大伙自己试试就可以了。
作者：雨泽Forest链接：http://www.jianshu.com/p/fa5814afac7d來源：简书著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论