ReactNative页面跳转实例代码

效果图如下所示：

进入工作目录，运行

react-native init NavigatorProject

创建项目NavigatorProject

{ return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画 } } renderScene = { (route,navigator) =>{ let Component = route.component; return 　　//渲染场景 } } /> ); } } //第一个页面 class FirstPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.push({　　//navigator.push 传入name和你想要跳的组件页面 name: "SecondPageComponent",component: SecondPageComponent }); } } render(){ return( 我是第一个页面 点击进入第二个页面 ); } } //第二个页面 class SecondPageComponent extends Component{ clickJump(){ const{navigator} = this.props; if(navigator){ navigator.pop();　　//navigator.pop 使用当前页面出栈,显示上一个栈内页面. } } render(){ return( 我是第二个页面 点击返回第一个页面 ); } } const styles = StyleSheet.create({ 　container: { 　　flex: 1,　　justifyContent: 'center',　　alignItems: 'center',　　backgroundColor: '#FFFFFF',　},}); AppRegistry.registerComponent('navigatorProject',() => navigatorProject);

以上所述是小编给大家介绍的ReactNative页面跳转实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。