ReactNative跨平台开发Navigator组件导航功能

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'

}

});