React Native导航栏系列（二）

接着昨天的 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括号里的名为首页的页面。

当然这些只是比较简单的一些方法，也是很常用的方法。

有问题可以留言哦，一起讨论~

React Native导航栏系列（二）

猜你喜欢