export default classLessonNavigatorextendsComponent {
render() {
varrootRoute= {
component: FirstPage
};
return(
/*
第一步:初始化路由对象
initialRoute
这个指定了默认的页面,也就是启动app之后会看到界面的第一屏,
对象的属性是自定义的,这个对象中的内容会在renderScene方法中处理.
备注:必须包含的属性,即component,表示需要渲染的页面组件
*/
initialRoute={rootRoute}
/*
第二步:
configureScene
场景渲染的配置
*/
configureScene={(route) => {
//页面跳转的动画
returnNavigator.SceneConfigs.PushFromRight;
}}
/*
第三步:
renderScene
渲染场景
参数: route(第一步创建并设置给导航器的路由对象), navigator(导航器对象)
实现: 给需要显示的组件设置属性
*/
renderScene={(route, navigator) => {
//从route对象中获取页面组件
varComponent= route.component;
return(
)
}}
/>
);
}
}
//定义第一个页面
//FirstPage 一个button,点击进入下一级页面
classFirstPageextendsComponent {
//按钮onPress事件处理方法
pressPush() {
//推出下一级页面
varnextRoute= {
component: SecondPage
};
this.props.navigator.push(nextRoute);
};
render() {
return(
点击推出下一级页面
);
}
}
//定义第二个页面
//SecondPage 一个button,点击返回上一级页面
classSecondPageextendsComponent {
//按钮onPress事件处理方法
pressPop() {
//推出下一级页面
this.props.navigator.pop()
}
render() {
return(
点我跳回去
);
}
}
conststyles= StyleSheet.create({
flex: {
flex:1,
justifyContent:'center',
alignItems:'center'
},
btn: {
width:150,
height:30,
borderColor:'#0089FF',
borderWidth:1,
borderRadius:3,
justifyContent:'center',
alignItems:'center'
}
});
