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

今天我们来看一下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
plain copy

 





//  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',  

  },  

});  

注意：NavigatorBar是我自定义的一个View，充当导航条，你可以将其换成一个按钮就行了；

效果如图：