React-Native 之 Modal介绍与使用
来源:互联网 发布:大数据专业大学排名 编辑:程序博客网 时间:2024/06/06 13:22
前言
- 遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。http://www.jianshu.com/p/fa5814afac7d
本章涉及资源下载:
链接: 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> ); } }
总结
- 从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal 了,对吧,时间关系,这边就不讲了,大伙自己试试就可以了。
0 0
- React Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- react-native Modal的学习与使用
- react-native Modal使用
- React Native之FlexBox介绍与使用
- React Native 之 Touchable 介绍与使用
- React-Native 组件之 Modal
- react native Modal 使用详解
- React-Native 组件之 Modal的使用详解
- React Native之Modal实现自定义Dialog
- React Native 控件之 Modal 详解
- React Native学习中之modal
- react native Modal使用以及封装
- React Native使用Modal自定义分享界面
- react-native-modal-alert
- react-native modal封装
- 基于深度学习的人脸识别系统
- RecyclerView+Glide+PhotoView
- 160个CrackMe之001
- Jenkins+Maven+SVN快速搭建持续集成环境
- hdu 1863 畅通工程
- React-Native 之 Modal介绍与使用
- hdu 2124 Repair the Wall
- SQL事务
- HDU5701 中位数计数【中位数】
- ViewPager相互嵌套,导致里层ViewPager无法滑动问题解决
- 2017 蓝桥模拟 排列序数 康托展开
- Unity中使用Protobuffer探讨
- 线刷手机
- Log和Canny边缘检测能力对比(附Matlab程序)