React-Native 之 Modal介绍与使用

前言

---

• 遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。
• 如本文有错或理解偏差欢迎联系我，会尽快改正更新！
• 如有什么问题，也可直接通过邮箱 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示例效果.gif

总结

---

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