ReactNative之Navigator 导航器
Navigator 导航器
从当前场景跳转到下一级场景，带转场动画
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
//第一个场景
var FirstScene=React.createClass({
pressPush:function()
{ //推出下一级别页面
var nextScene={component:SecondScene};
this.props.navigator.push(nextScene);
},
render(){
return(
Go NextPage
);
}
});
//第二场景
var SecondScene=React.createClass({
pressPop:function()
{ //返回上一级页面
//var prevScene={componment:FirstScene};
this.props.navigator.pop(); //直接返回上一级页面不需要pop参数
},
render(){
return(
Go prevPage
);
}
});
var NavigatorDemo=React.createClass({
render(){
var rootRoute={
component:FirstScene
};
return(
initialRoute={rootRoute} /* 制定初始默认页面*/
configureScene={(route)=>{
return Navigator.SceneConfigs.PushFromRight; /* 配置场景转场动画从右到左*/
}}
renderScene={(route,navigator)=>{ /*渲染场景*/
var Component=route.component;
return(
navigator={navigator} /*将navigator传递到下一个场景*/
route={route}/> /*将route传递到下一个场景*/
);
}}
/>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
btn:{
padding:5,
backgroundColor:'#06f',
borderRadius:5,
}
});
module.exports=NavigatorDemo;
