import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Image,
Navigator
} from 'react-native'; 
class navigatorProject extends Component{
render(){
let defaultName = 'firstPageName';
let defaultComponent = FirstPageComponent;
return(
<Navigator
initialRoute = {{name: defaultName, component: defaultComponent}}　　//初始化導(dǎo)航器Navigator,指定默認(rèn)的頁(yè)面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight;　　//配置場(chǎng)景動(dòng)畫(huà)，頁(yè)面之間跳轉(zhuǎn)時(shí)候的動(dòng)畫(huà)
}
}
renderScene = {
(route, navigator) =>{
let Component = route.component;
return <Component{...route.params} navigator = {navigator} />　　//渲染場(chǎng)景
}
}
/>
);
} 
} 
//第一個(gè)頁(yè)面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.push({　　//navigator.push 傳入name和你想要跳的組件頁(yè)面
name: "SecondPageComponent",
component: SecondPageComponent
});
} 
}
render(){
return(
<View style = {styles.container}>
<Text>我是第一個(gè)頁(yè)面</Text>
<TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>點(diǎn)擊進(jìn)入第二個(gè)頁(yè)面</Text>
</TouchableHighlight>
</View>
);
}
} 
//第二個(gè)頁(yè)面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.props;
if(navigator){
navigator.pop();　　//navigator.pop 使用當(dāng)前頁(yè)面出棧, 顯示上一個(gè)棧內(nèi)頁(yè)面.
}
}
render(){
return(
<View style = {styles.container}>
<Text>我是第二個(gè)頁(yè)面</Text>
<TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
}}
onPress = {this.clickJump.bind(this)}>
<Text>點(diǎn)擊返回第一個(gè)頁(yè)面</Text>
</TouchableHighlight>
</View>
);
}
} 
const styles = StyleSheet.create({
　container: {
　　flex: 1,
　　justifyContent: 'center',
　　alignItems: 'center',
　　backgroundColor: '#FFFFFF',
　},
});
AppRegistry.registerComponent('navigatorProject', () => navigatorProject);