接着昨天的 React Native导航栏系列(一),今天继续了解RN中导航的知识。
在应用中,最需要的就是页面之间跳转,返回页面,跳转到指定页面等等一系列页面导航问题。
首先,你的应用里所有页面都需要写在页面栈的容器中。
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="首页" component={HomeScreen}/>
<Stack.Screen name="用户列表" component={UserListScreen} />
{*这里是你的所有页面*}
</Stack.Navigator>
</NavigationContainer>
因为在写项目的时候,每个页面都是一个文件,如有公共模板再进行引入。所以上面的HomeScreen和UserListScreen是两个不同的页面,在这里你可以任意增加页面。然后进行页面之间的跳转等操作。
项目启动从index.js进入到App.js。在App.js中我们定义导航栏以及TabBar,然后引入了进入APP所看得到的页面。
拿我的项目来讲,我们在App.js文件中引入需要的组件,接着配置好导航栏:
import 'react-native-gesture-handler';
import * as React from 'react';
import { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
export default class App extends Component {
constructor(props){
super(props);
}
render(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="首页" component={HomeScreen}/>
<Stack.Screen name="用户列表" component={UserListScreen} />
</Stack.Navigator>
</NavigationContainer>
)
};
};
然后,我们在HomeScreen页面进行页面的跳转等操作。
我们首先看一下首页的构造函数里的参数值都有什么,打印一下this。
上图中的props下的navigation就是在某个页面被 StackNavigator(页面导航栈) 加载的时候,会自动分配一个 navigation 属性。
我就拿上图中的几个函数来做示范:
- 页面跳转(navigate):
onPress={()=>this.props.navigation.navigate('用户列表')}
当你点击某个组件时,就会进行寻找页面栈里名称为 用户列表 的组件,然后进行跳转。
2. 页面跳转(push):
push和navigate的区别就在于,push能够往页面栈里添加多个相同的页面,而navigate不可以。
- 返回页面(goBack):
onPress={()=>this.props.navigation.goBack()}
当页面定义某个组件加上此方法时,也是可以返回页面的。
- 页面替换(replace):
setTimeout(() => {
this.props.navigation.replace('首页');
}, 3000);
页面替换就是把当前显示的页面替换为replace括号里的名为 首页 的页面。
当然这些只是比较简单的一些方法,也是很常用的方法。
有问题可以留言哦,一起讨论~