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

   <h2>(一)前言</h2>    <p>今天我们来看一下React Native控件Modal具体介绍以及实际使用方法,该适配Android、iOS双平台。</p>    <p>刚创建的React Native技术交流4群( 458982758 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!</p>    <p>Modal视图在iOS原生开发中熟称:"模态视图",Modal进行封装之后，可以弹出来覆盖包含React Native跟视图的原生界面(例如:UiViewControllView,Activity)。在使用React Native开发的混合应用中使用Modal组件，该可以让你使用RN开发的内功呈现在原生视图的上面。</p>    <p>如果你使用React Native开发的应用，从跟视图就开始开发起来了，那么你应该是Navigator导航器进行控制页面弹出，而不是使用Modal模态视图。通过顶层的Navigator，你可以使用configureScene属性进行控制如何在你开发的App中呈现一个Modal视图。</p>    <h2>(二)属性方法</h2>    <p>1.animated bool  控制是否带有动画效果</p>    <p>2.onRequestClose  Platform.OS==='android'? PropTypes.func.isRequired : PropTypes.func</p>    <p>3.onShow function方法</p>    <p>4.transparent bool  控制是否带有透明效果</p>    <p>5.visible  bool 控制是否显示</p>    <h2>(三)实例</h2>    <p>上面我们已经对于Modal组件做了相关介绍，下面我们使用一个实例具体来演示一下Modal组件的基本用法。首先来看一下具体代码:</p>    <pre>  <code class="language-javascript">/**   * Sample React Native App   * https://github.com/非死book/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);</code></pre>    <p>运行效果如下:</p>    <p>iOS平台运行效果</p>    <p><img src="https://simg.open-open.com/show/cf798e5482e3b5cac93693c19521ccf5.gif"></p>    <p>Android平台运行效果:</p>    <p><img src="https://simg.open-open.com/show/cfd60c5cbd5bbc381aa5dc1ca8664175.gif"></p>    <p> </p>    <p>来自： http://www.lcode.org/react-native-控件之modal详解-androidios双平台通用56/</p>    <p> </p>