React-Native 之 Modal介绍与使用

发布时间：2020-12-15 05:10:37 所属栏目：百科来源：网络整理

导读：遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。http://www.jianshu.com/p/fa5814afac7d 本章涉及资源下载：链接:https://pan.baidu.com/s/1o84o6JS密码: htx6 属性 animationType （动画类型） PropTypes.oneOf(['none','slide','fade']) none：没

遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。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() {
              false
              });
          }

          render() {
              return(
                  <View style={styles.container}> {/* 初始化Modal */} Modal animationType='slide' // 从底部滑入 transparent={false} // 不透明 visible={this.state.isModal} // 根据isModal决定是否显示 onRequestClose={() => {this.onRequestClose()}} // android必须实现 > {styles.modalViewStyle}> {/* 关闭页面 */} TouchableOpacity onPress={() => {{ this.setState({ isModal:false }) }}} > Text>关闭页面</Text> TouchableOpacity> View> Modal> {/* 返回按钮 */} {() => {{ this.props.navigator.pop() }}} > Text>返回TouchableOpacity> {/* 模态跳转 */} {() => this.showModal()} > Text>模态跳转View>
              );
          }
      }

modal 使用 —— 指示器

这边我们再来做一个经常使用的功能 —— 指示器

true
              })

              setTimeout(() => {
                  this.setState({
                      isModal:false
                  });
              },1500)
          }

          onRequestClose() {
              'fade' // 淡入淡出 transparent={true} // 透明 visible={styles.modalViewStyle}> {styles.hudViewStyle}> ActivityIndicator style={styles.chrysanthemumStyle}>ActivityIndicator> Text style={styles.hudTextStyle}>加载中…TouchableOpacity> {/* 显示指示器 */} Text>显示指示器View>
              );
          }
      }

model示例效果.gif

总结

从modal的源码可以看出，modal其实就是使用了绝对定位，所以当modal无法满足我们的需求的时候，我们就可以通过绝对定位自己来封装一个modal了，对吧，时间关系，这边就不讲了，大伙自己试试就可以了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!