在第五篇中介绍了 使用导航Navigator进行(页面)场景的切换 ,但是对于一些需求其实是无法满足,或者说太浪费。例如:
1. 只是想做一个很简单的页面切换,并不需要记录从哪来~也不需要手势滑屏返回等,这时使用导航Navigator太浪费了。
2. 假设:
a) 有个View 包括一个Navigator组件和一个Image组件
b) Navigator 对页面A ,B,C之间进行导航
此时我们有个需求在B页面切换到一个崭新空白的页面场景中(不带Image),此时我们想要通过Navigator实现需求则变得非常麻烦。(为此,Himi考虑尝试了很多方式)
代码段1:
this.state = { pageIndex:0 };
代码段2:
switch(this.state.pageIndex) { case 0: return ( ...... ); case 1: return ( ...... ); case 2: return ( ...... ); }
其实此种方式非常容易理解,是利用对变量的操作,进而控制绘制的不同。
(运行效果放在最后一并展示)
Modal组件,首先给出官方解释:
Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
在从根视图开始就使用RN编写的应用中,你应该使用Navigator来代替Modal。通过一个最顶层的Navigator,你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。
简单来说,利用Modal只是模拟感觉切(页面)场景的,Modal只是覆盖到当前视图上而已,且可以任意布局和添加组件,Modal是个崭新空白的(页面)场景。
示例:
<Modal animated={this.state.animationType} transparent={this.state.transparent} visible={this.state.modalVisible} onRequestClose={() => {this._setModalVisible(false)}} > </Modal>
需要强调的是,Modal 在设置为可见情况下,默认覆盖当前视图之上。
Main.js 是入口显示的主要视图
importReact, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, Modal, } from 'react-native'; importSecondPagefrom "./SecondPage"; export default class Main extends Component { constructor(props) { super(props); this.state = { animationType: true, modalVisible: true, transparent: true, pageIndex:0 }; } _setModalVisible(visible) { this.setState({modalVisible: visible}); } replaceScene(){ this.setState({pageIndex:1}); } addModal(){ this.setState({pageIndex:2}); } render() { switch(this.state.pageIndex) { case 0: return ( <Viewstyle={styles.container} > <Text style={styles.himiTextStyle}>HimiReactNative 教程</Text> <Viewstyle={styles.himiViewStyle}> <TouchableHighlight underlayColor='#f00' onPress={this.replaceScene.bind(this)} > <Text style={{fontSize:20}}>点击切换页面</Text> </TouchableHighlight> <TouchableHighlight underlayColor='#f00' onPress={this.addModal.bind(this)} > <Text style={{fontSize:20}}>点击添加Modal</Text> </TouchableHighlight> </View> </View> ); case 1: return <SecondPage/>; case 2: return ( <Viewstyle={styles.container} > <Modal animated={this.state.animationType} transparent={this.state.transparent} visible={this.state.modalVisible} onRequestClose={() => {this._setModalVisible(false)}} > <Viewstyle={styles.modalViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this._setModalVisible.bind(this, false)} > <Text style={styles.text} > 我是Modal,点击将隐藏 </Text> </TouchableHighlight> </View> </Modal> <Text style={styles.himiTextStyle}>HimiReactNative 教程</Text> <Viewstyle={styles.himiViewStyle}> <TouchableHighlight underlayColor='#f00' onPress={this.replaceScene.bind(this)} > <Text style={{fontSize:20}}>点击切换页面</Text> </TouchableHighlight> </View> </View> ); } } }; var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, text: { color:'#fff', fontSize:30, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, modalViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F00', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, });
SecondPage.js 是用来展示第一种逻辑切页用的
importReact, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, } from 'react-native'; importMainfrom "./Main"; exportdefault class SecondPageextends React.Component { constructor(props) { super(props); this.state = { pageIndex:0 }; } replaceScene(){ this.setState({pageIndex:1}); } render() { switch(this.state.pageIndex) { case 0: return ( <Viewstyle={styles.himiViewStyle} > <Viewstyle={styles.himiViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this.replaceScene.bind(this)} > <Text style={styles.text} > 我是SecondPage,点我切换 </Text> </TouchableHighlight> </View> </View> ) case 1: return <Main/>; } } }; var styles = StyleSheet.create({ text: { color:'#f00', fontSize:20, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#FF0', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, });
演示效果图:(点击查看动态效果)