React Native 控件之 Modal 详解 - Android/iOS 双平台通用

最新推荐文章于 2025-04-29 18:51:27 发布

barnett_y

最新推荐文章于 2025-04-29 18:51:27 发布

阅读量1.6k

点赞数

分类专栏：【React-Native点滴知识】

【React-Native点滴知识】专栏收录该内容

137 篇文章

订阅专栏

今天我们来看一下React Native控件Modal具体介绍以及实际使用方法,该适配Android、iOS双平台。

刚创建的React Native技术交流4群( 458982758 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后，可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件，该可以让你使用RN开发的内功呈现在原生视图的上面。

如果你使用React Native开发的应用，从跟视图就开始开发起来了，那么你应该是Navigator导航器进行控制页面弹出，而不是使用Modal模态视图。通过顶层的Navigator，你可以使用configureScene属性进行控制如何在你开发的App中呈现一个Modal视图。

(二)属性方法

1.animated bool 控制是否带有动画效果

2.onRequestClose Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func

3.onShow function方法

4.transparent bool 控制是否带有透明效果

5.visible bool 控制是否显示

(三)实例

上面我们已经对于Modal组件做了相关介绍，下面我们使用一个实例具体来演示一下Modal组件的基本用法。首先来看一下具体代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Modal,
  Switch,
} from 'react-native';

class Button extends React.Component {
  constructor(props){
    super(props);
    this.state={
      active: false,
    };
    this._onHighlight = this.onHighlight.bind(this);
    this._onUnhighlight = this.onUnhighlight.bind(this);
  }

  onHighlight() {
    this.setState({active: true,});
  }

  onUnhighlight() {
    this.setState({active: false,});
  }

  render() {
    var colorStyle = {
      color: this.state.active ? '#fff' : '#000',
    };
    return (
      <TouchableHighlight
        onHideUnderlay={this._onUnhighlight}
        onPress={this.props.onPress}
        onShowUnderlay={this._onHighlight}
        style={[styles.button, this.props.style]}
        underlayColor="#a9d9d4">
          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
      </TouchableHighlight>
    );
  }
}

class ModalDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      animationType: false,
      modalVisible: false,
      transparent: false,

    };
    this._toggleTransparent = this.toggleTransparent.bind(this);
  }

  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  _setAnimationType(type) {
    this.setState({animationType: type});
  }

  toggleTransparent() {
    this.setState({transparent: !this.state.transparent});
  }

  render() {
     const modalBackgroundStyle = {
      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
     }
     const innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: 'red', padding: 20}
      : null

   return (
      <View style={{paddingTop:20,paddingLeft:10,paddingRight:10}}>
        <Text style={{color:'red'}}>Modal实例演示</Text>
        <Modal
          animated={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => {this._setModalVisible(false)}}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>Modal视图被显示:{this.state.animationType === false ? '没有' : '有',this.state.animationType}动画效果.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
                  关闭Modal
              </Button>
            </View>
          </View>
        </Modal>
        <View style={styles.row}>
          <Text style={styles.rowTitle}>动画类型</Text>
          <Button onPress={this._setAnimationType.bind(this,false)} style={this.state.animationType === false ? {backgroundColor:'red'}: {}}>
            无动画
          </Button>
          <Button onPress={this._setAnimationType.bind(this, true)} style={this.state.animationType === true ? {backgroundColor:'yellow'} : {}}>
            滑动效果
          </Button>
        </View>

        <View style={styles.row}>
          <Text style={styles.rowTitle}>透明</Text>
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
            显示Modal
        </Button>
      </View>
    )}
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  row: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    marginBottom: 20,
  },
  rowTitle: {
    flex: 1,
    fontWeight: 'bold',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
  modalButton: {
    marginTop: 10,
  },
});

AppRegistry.registerComponent('ModalDemo', () => ModalDemo);

运行效果如下:

iOS平台运行效果

Android平台运行效果:

React Native学习之Modal控件自定义弹出View

RN学习，好多知识都懒得写，趁今天有空，来一发吧，Modal控件的一个小demo；参考文章地址：http://reactnative.cn/docs/0.27/modal.html#content

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
下面是代码：

[html]view plaincopy 
    
 //  HomePage  
 //  功能: 该类的作用  
 //  Created by 小广 on  2016-06-12 上午.  
 //  Copyright © 2016年  All rights reserved.  
   
 'use strict';  
 import React, { Component } from 'react';  
 import {  
   View,  
   Text,  
   Image,  
   Modal,  
   Navigator,  
   TextInput,  
   ScrollView,  
   StyleSheet,  
   Dimensions,  
   TouchableHighlight,  
 } from 'react-native';  
 import NavigatorBar from '../tools/navigator'  
 var { width, height, scale } = Dimensions.get('window');  
 // 类  
 export default class HomePage extends Component {  
   // 构造函数  
   constructor(props) {  
     super(props);  
     this.state = {  
       show:false,  
     };  
   }  
   
   // 加载完成  
   componentDidMount(){  
     //  
   }  
   
   // view卸载  
   componentWillUnmount(){  
     //  
   }  
   
   // 自定义方法区域  
   // your method  
   _leftButtonClick() {  
   
   }  
   _rightButtonClick() {  
     //  
     console.log('右侧按钮点击了');  
     this._setModalVisible();  
   }  
   
   // 显示/隐藏 modal  
   _setModalVisible() {  
     let isShow = this.state.show;  
     this.setState({  
       show:!isShow,  
     });  
   }  
   
   // 绘制View  
   render() {  
      return (  
        <View style={styles.container}>  
          <NavigatorBar  
            title='Modal测试'  
            titleTextColor='#F2380A'  
            rightItemTitle='按钮'  
            rightTextColor='#F2380A'  
            rightItemFunc={this._rightButtonClick.bind(this)} />  
          <Modal  
            animationType='slide'  
            transparent={true}  
            visible={this.state.show}  
            onShow={() => {}}  
            onRequestClose={() => {}} >  
            <View style={styles.modalStyle}>  
              <View style={styles.subView}>  
                <Text style={styles.titleText}>  
                  提示  
                </Text>  
                <Text style={styles.contentText}>  
                  Modal显示的View 多行了超出一行了会怎么显示，就像这样显示了很多内容该怎么显示，看看效果  
                </Text>  
                <View style={styles.horizontalLine} />  
                <View style={styles.buttonView}>  
                  <TouchableHighlight underlayColor='transparent'  
                    style={styles.buttonStyle}  
                    onPress={this._setModalVisible.bind(this)}>  
                    <Text style={styles.buttonText}>  
                      取消  
                    </Text>  
                  </TouchableHighlight>  
                  <View style={styles.verticalLine} />  
                  <TouchableHighlight underlayColor='transparent'  
                    style={styles.buttonStyle}  
                    onPress={this._setModalVisible.bind(this)}>  
                    <Text style={styles.buttonText}>  
                      确定  
                    </Text>  
                  </TouchableHighlight>  
                </View>  
              </View>  
            </View>  
         </Modal>  
        </View>  
      );  
   }  
   
 }  
 // Modal属性  
 // 1.animationType bool  控制是否带有动画效果  
 // 2.onRequestClose  Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func  
 // 3.onShow function方法  
 // 4.transparent bool  控制是否带有透明效果  
 // 5.visible  bool 控制是否显示  
   
 // css样式  
 var styles = StyleSheet.create({  
   container:{  
     flex:1,  
     backgroundColor: '#ECECF0',  
   },  
   // modal的样式  
   modalStyle: {  
     // backgroundColor:'#ccc',  
     alignItems: 'center',  
     justifyContent:'center',  
     flex:1,  
   },  
   // modal上子View的样式  
   subView:{  
     marginLeft:60,  
     marginRight:60,  
     backgroundColor:'#fff',  
     alignSelf: 'stretch',  
     justifyContent:'center',  
     borderRadius: 10,  
     borderWidth: 0.5,  
     borderColor:'#ccc',  
   },  
   // 标题  
   titleText:{  
     marginTop:10,  
     marginBottom:5,  
     fontSize:16,  
     fontWeight:'bold',  
     textAlign:'center',  
   },  
   // 内容  
   contentText:{  
     margin:8,  
     fontSize:14,  
     textAlign:'center',  
   },  
   // 水平的分割线  
   horizontalLine:{  
     marginTop:5,  
     height:0.5,  
     backgroundColor:'#ccc',  
   },  
   // 按钮  
   buttonView:{  
     flexDirection: 'row',  
     alignItems: 'center',  
   },  
   buttonStyle:{  
     flex:1,  
     height:44,  
     alignItems: 'center',  
     justifyContent:'center',  
   },  
   // 竖直的分割线  
   verticalLine:{  
     width:0.5,  
     height:44,  
     backgroundColor:'#ccc',  
   },  
   buttonText:{  
     fontSize:16,  
     color:'#3393F2',  
     textAlign:'center',  
   },  
 });  