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

importReact, { Component }from'react';

import{

AppRegistry,

StyleSheet,

Text,

View,

Navigator,

TouchableOpacity

}from'react-native';

classFirstPageextendsComponent {

pressPush() {

varnextRoute= {

component: SecondPage

};

this.props.navigator.push(nextRoute);

}

render() {

return(

点击推出下一级页面

);

}

}

classSecondPageextendsComponent {

pressPop() {

this.props.navigator.pop()

}

render() {

return(

点我跳回去

);

}

}

export default classLessonNavigatorextendsComponent {

render() {

varrootRoute= {

component: FirstPage

};

return(

initialRoute={rootRoute}

configureScene={(route) => {

returnNavigator.SceneConfigs.PushFromRight;

}}

renderScene={(route, navigator) => {

varComponent= route.component;

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'

}

});