ReactNative页面跳转实例代码

前端之家收集整理的这篇文章主要介绍了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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/45525.html

猜你在找的JavaScript相关文章