本站文章均爲 李華明Himi 原創,轉載務必在明顯處註明：
轉載自【黑米GameDev街區】 原文鏈接: http://www.himigame.com/react-native/2285.html
在第五篇中介紹了使用導航Navigator進行(頁面)場景的切換，但是對於一些需求其實是無法滿足，或者說太浪費。例如：
1. 只是想做一個很簡單的頁面切換，並不需要記錄從哪來～也不需要手勢滑屏返回等，這時使用導航Navigator太浪費了。
2. 假設:
a) 有個View 包括一個Navigator組件和一個Image組件
b) Navigator 對頁面A ，B，C之間進行導航
此時我們有個需求在B頁面切換到一個嶄新空白的頁面場景中（不帶Image），此時我們想要通過Navigator實現需求則變得非常麻煩。（爲此，Himi考慮嘗試了很多方式）
本篇主要介紹除了使用Navigator 之外的兩種切換頁面的方法：
一：採用邏輯控制繪製
代碼段1：
this.state = {
pageIndex:0
};代碼段2：
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是個嶄新空白的（頁面）場景。
示例：
<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:( 回調函數 ) 是指Android的返回實體按鈕，ios可以不用處理
需要強調的是，Modal 在設置爲可見情況下，默認覆蓋當前視圖之上。
爲了更好的演示效果與代碼參考，Himi專門寫了一個示例，如下兩個文件：
Main.js 是入口顯示的主要視圖
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 是用來展示第一種邏輯切頁用的
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,
},
});演示效果圖：（點擊查看動態效果）
