本文共 5430 字，大约阅读时间需要 18 分钟。
在第五篇中介绍了，但是对于一些需求其实是无法满足，或者说太浪费。例如：
1. 只是想做一个很简单的页面切换，并不需要记录从哪来～也不需要手势滑屏返回等，这时使用导航Navigator太浪费了。
2. 假设:
a) 有个View 包括一个Navigator组件和一个Image组件
b) Navigator 对页面A ，B，C之间进行导航
此时我们有个需求在B页面切换到一个崭新空白的页面场景中（不带Image），此时我们想要通过Navigator实现需求则变得非常麻烦。（为此，Himi考虑尝试了很多方式）
本篇主要介绍除了使用Navigator 之外的两种切换页面的方法：
一：采用逻辑控制绘制
代码段1：
| 1 2 3 | this .state = { pageIndex:0 }; |
代码段2：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | switch ( this .state.pageIndex) { case 0: return ( ...... ); case 1: return ( ...... ); case 2: return ( ...... ); } |
其实此种方式非常容易理解，是利用对变量的操作，进而控制绘制的不同。
当通过this.setState()函数对pageIndex进行修改，从而this进行重绘时，会根据pageIndex的值不同，绘制出各不相同的内容。
（运行效果放在最后一并展示）
二：采用Modal组件
Modal组件，首先给出官方解释：
Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
在从根视图开始就使用RN编写的应用中，你应该使用Navigator来代替Modal。通过一个最顶层的Navigator，你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。
简单来说，利用Modal只是模拟感觉切（页面）场景的，Modal只是覆盖到当前视图上而已，且可以任意布局和添加组件，Modal是个崭新空白的（页面）场景。
示例：
| 1 2 3 4 5 6 7 | <Modal animated={ this .state.animationType} transparent={ this .state.transparent} visible={ this .state.modalVisible} onRequestClose={() => { this ._setModalVisible( false )}} > </Modal> |
animated: （bool类型）是否带有动画效果
注意：animated是旧版本才有的属性
新版本属性为：animationType enum(‘none’, ‘slide’, ‘fade’)
transparent: (bool类型)是否透明
visible: (bool类型)是否可见
onRequestClose:( 回调函数 ) 是指的返回实体按钮，ios可以不用处理
需要强调的是，Modal 在设置为可见情况下，默认覆盖当前视图之上。
为了更好的演示效果与代码参考，Himi专门写了一个示例，如下两个文件：
Main.js 是入口显示的主要视图
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import React, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, Modal, } from 'react-native' ; import SecondPage from "./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 ( <View style={styles.container} > <Text style={styles.himiTextStyle}>Himi React Native 教程</Text> <View style={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 ( <View style={styles.container} > <Modal animated={ this .state.animationType} transparent={ this .state.transparent} visible={ this .state.modalVisible} onRequestClose={() => { this ._setModalVisible( false )}} > <View style={styles.modalViewStyle}> <TouchableHighlight underlayColor= '#4169e1' onPress={ this ._setModalVisible.bind( this , false )} > <Text style={styles.text} > 我是Modal,点击将隐藏 </Text> </TouchableHighlight> </View> </Modal> <Text style={styles.himiTextStyle}>Himi React Native 教程</Text> <View style={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 是用来展示第一种逻辑切页用的
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import React, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, } from 'react-native' ; import Main from "./Main" ; export default class SecondPage extends React.Component { constructor(props) { super (props); this .state = { pageIndex:0 }; } replaceScene(){ this .setState({pageIndex:1}); } render() { switch ( this .state.pageIndex) { case 0: return ( <View style={styles.himiViewStyle} > <View style={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, }, }); |
演示效果图：（点击查看动态效果）