Navigator 導(dǎo)航器
從當(dāng)前場(chǎng)景跳轉(zhuǎn)到下一級(jí)場(chǎng)景，帶轉(zhuǎn)場(chǎng)動(dòng)畫
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
//第一個(gè)場(chǎng)景
var FirstScene=React.createClass({
pressPush:function()
{ //推出下一級(jí)別頁(yè)面
var nextScene={component:SecondScene};
this.props.navigator.push(nextScene);
},
render(){
return(
Go NextPage
);
}
});
//第二場(chǎng)景
var SecondScene=React.createClass({
pressPop:function()
{ //返回上一級(jí)頁(yè)面
//var prevScene={componment:FirstScene};
this.props.navigator.pop(); ? ? ? //直接返回上一級(jí)頁(yè)面不需要pop參數(shù)
},
render(){
return(
Go prevPage
);
}
});
var NavigatorDemo=React.createClass({
render(){
var rootRoute={
component:FirstScene
};
return(
initialRoute={rootRoute} ? ? ? ? ? ? ? ? ? ? ? /* ?制定初始默認(rèn)頁(yè)面*/
configureScene={(route)=>{
return Navigator.SceneConfigs.PushFromRight; /* 配置場(chǎng)景轉(zhuǎn)場(chǎng)動(dòng)畫從右到左*/
}}
renderScene={(route,navigator)=>{ ? ? ? ? ? ? ?/*渲染場(chǎng)景*/
var Component=route.component;
return(
navigator={navigator} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*將navigator傳遞到下一個(gè)場(chǎng)景*/
route={route}/> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*將route傳遞到下一個(gè)場(chǎng)景*/
);
}}
/>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
btn:{
padding:5,
backgroundColor:'#06f',
borderRadius:5,
}
});
module.exports=NavigatorDemo;
