react native页面之间花式跳转

最新推荐文章于 2024-08-14 16:03:08 发布

原创最新推荐文章于 2024-08-14 16:03:08 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

本文介绍如何在React应用中使用navigate和push方法进行页面跳转，区分它们的返回行为，并展示了如何结合createMaterialBottomNavigator和createStackNavigator实现底部导航与页面堆叠。通过实例，帮助理解不同导航方式的应用场景。

1，A页面跳转到B，B跳转到C，C跳转到D。要求：在B页面上方无返回按钮，C、D页面都有返回按钮。且B返回A页面，C返回B，D返回C。
A.js
import    B from ' ./B';
import    C from './C';
import    D from './D';
<TouchableOpacity
onPress={this.props.navigation.navigate("B") >
export default createStackNavigator({
   A: { screen:A }
   B: { screen:B }
C: { screen:C }
   D: { screen:D }
} )

B.js
<TouchableOpacity
onPress={this.props.navigation.push("C") >    //不需要导入import，也不需要createStackNavigator

C.js
<TouchableOpacity
onPress={this.props.navigation.push("C") > //同B一样

效果图：

总结：这里的关键是，this.props.navigation.navigate和this.props.navigation.push的区别；前者表示谁定义了它（createStackNavigator)，就返回到这个页面，后者表示从谁那里跳转过来的 (谁调用了this.props)，就返回到哪里去。

2，B页面有底部导航（createMaterialBottomNavigator)，可以切换页面。并且同时有页面跳转(createStackNavigator)到C页面的功能：
   B.js:
const bottomTab=createMaterialBottomNavigator({
   B1: { screen: B1},
B2: { screen: B2},
B3: { screen: B3},
})

export default createStackNavigator({
bottomTab:{screen: bottomTab },    //将底部导航嵌入到堆栈导航中即可
C: {screen: C },
})

效果图：

为了突出重点，关键的字和图留着，其他都码掉，这样应该看的很明白了。