React Navigation 5.x详解

2020/12/2 5:24:48

编程Tag： 前端 react-native ios android

本文主要是介绍React Navigation 5.x详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、 React Navigation简介

在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigation。

和之前的版本一样，React Navigation支持的导航类型有三种，分别是StackNavigator、TabNavigator和DrawerNavigator。

StackNavigator：包含导航栏的页面导航组件，类似于官方的Navigator组件。
TabNavigator：底部展示tabBar的页面导航组件。
DrawerNavigator：用于实现侧边栏抽屉页面的导航组件。

1.1 安装

使用React Navigation之前，需要在你的React Native项目中安装所需的软件包，安装的方式分为npm和 yarn两种方式，如下所示。

npm install @react-navigation/native
//或者
yarn add @react-navigation/native

目前为止，我们所安装的包都是导航的一些基础架构所需要的包，如果要创建不同的导航栈效果，需要安装单独的插件宝。常见的有如下插件：react-native-gesture-handler, react-native-reanimated, react-native-screens 、react-native-safe-area-context 和@react-native-community/masked-view，然后运行如下命令安装插件。

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

需要的依赖库的作用如下所示：

react-native-gesture-handler：用于手势切换页面。
react-native-screens：用于原生层释放未展示的页面，改善 app 内存使用。
react-native-safe-area-context：用于保证页面显示在安全区域（主要针对刘海屏）。
@react-native-community/masked-view：用在头部导航栏中返回按钮的颜色设置。
@react-navigation/native 为 React Navigation 的核心。

官方文档中提到的 react-native-reanimated，该依赖在使用 DrawerNavigator 才用的到，不晓得为啥放到了总的安装文档中，尽量都安装上。

React Native 0.60 及其以上版本，不需要再运行react-native link 来安装原生库，如果没有链接上原生的库，也可以使用下面的命令进行安装。

npx pod-install ios

1.2 RN的提示插件

自从2019年《React Native移动开发实战第2版》出版之后，我对RN的关注就比较少。并且由于更新了WebStrom好像之前安装的插件都失效了。

在RN开发中，如果没有安装代码提示插件，编写代码是非常痛苦的，好在我使用之前的ReactNative.xml还能提示。安装ReactNative.xml的步骤如下：
1，下载ReactNative.xml，链接地址ReactNative.xml
2，然后/Users/mac/Library/Application Support/JetBrains/WebStorm2020.1/目录下新建templates文件，并将上面下载的ReactNative.xml拷贝进去。
3，重启WebStrom，就可以看到提示了

在这里插入图片描述

二、 Hello React Navigation

在Web浏览器应用开发中，我们可以使用锚(标记)链接到不同的页面，当用户单击链接时，URL被推到浏览器历史堆栈中。当用户按下返回按钮时，浏览器会从历史堆栈的顶部弹出以前访问过的页面。而在React Native开发中，我们可以使用React Navigation的堆栈导航器来管理页面的跳转和导航栈的管理。

为了完成多页面的栈管理，我们需要用到React Navigation提供的createStackNavigator组件，并且使用前请确保安装了如下的插件。

npm install @react-navigation/stack

2.1 堆栈导航器

createStackNavigator是一个函数，它返回的对象包含两个属性，即屏幕和导航器，它们都是用于配置导航器的React组件。而NavigationContainer是一个管理导航树并包含导航状态的组件，该组件必须包装所有导航器结构。

为此我们新建一个管理路由页面的App.js文件，并添加如下代码：

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

然后，我们修改RN项目的index.js文件的入口文件的路径为上面的App.js文件的路径，并运行项目，效果如下图所示。
在这里插入图片描述

2.2 配置导航器

所有的路由配置都会对应导航器上的属性，因为我们还没有设置我们导航器的任何属性，使用的都是默认的配置，现在我们来为我们的堆栈导航器添加第二个screen。

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

现在我们的路由栈中有两个路由，一个是Home另一个是Details。我们可以通过添加Screen组件的方式添加路由。Screen组件有一个name属性用来指定路由的名字，还有一个component属性，用来指定我们将要渲染的组件。在上面的示例代码中，Home路由对应的是HomeScreen组件，Details路由对应的是DetailsScreen组件。

需要说明的是，component属性接收的是组件而不是一个render()方法。所以不要给它传递一个内联函数（比如component={()=><HomeScreen />}）,否则你的组件在被卸载并再次加载的时候回丢失所有的state。

2.3 设置option参数

导航器中的每一个路由页面都可以设置一些参数，例如title。

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}/>

如果要传递一些额外的属性，还可以使用一个render函数作为组件的属性，如下所示。

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

三、路由栈页面跳转

一个完整的应用通常是由多个路由构成的，并且路由之间可以相互跳转。在Web浏览器应用开发中，我们可以使用如下的方式实现页面的跳转。

<a href="details.html">Go to Details</a>

当然，也可以使用如下的方式。

<a
  onClick={() => {
    window.location.href = 'details.html';
  }}
>
  Go to Details
</a>

3.1 跳转到一个新页面

那对于React Navigation来说，怎么跳转到一个新的页面呢？由于在React Navigation栈导航器中，navigation属性会被传递到每一个screen组件中，所以我们可以使用如下的方式执行页面的跳转。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

// ... other code from the previous section

在上面的代码中，我们用到了navigation和navigate()方法。

navigation ：在堆栈导航器中，navigation属性会被传递到每一个screen组件中。
navigate() ：我们调用navigate方法来实现页面的跳转。

运行上面的代码，运行效果如下图所示。
在这里插入图片描述
如果我们调用navigation.navigate方法跳转到一个我们没有在堆栈导航器中定义的路由的话会怎么呢，什么事情也不会发生。

3.2 多次跳转到同一个路由

如果我们多次跳转同一个路由页面会怎么样呢，如下所示。

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

运行上面的代码，当你点击【Go to Details】时，什么事情都不会发生，这是因为我们已经在Details页面了。

现在我们假设一下，如果是我们想要添加另一个详情页面呢？这是一个很常见的场景，在这个场景中我们想在同一个Details页面展示不同的数据。为了实现这个，我们可以用push()方法来替代navigate()方法，push()方法可以直接向堆栈中添加新的路由而无视当前导航历史。

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

运行上面的代码，效果如下图所示。
在这里插入图片描述

3.3 路由返回

堆栈导航器提供的导航头默认包含一个返回按钮，点击按钮可以返回到上一个页面，如果导航堆栈中只有一个页面，也就是说并没有可以返回的页面的时候，这个回退按钮就不显示。

如果我们使用的是自定义的导航头，可以使用navigation.goBack()方法来实现路由返回，如下所示。

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

另一个常见的需求就是返回到多个页面。比如，如果你的堆栈中有多个页面，你想依次移除页面然后返回到第一个页面上。在上面的场景中，我们想要返回Home页面，所以我们可以使用navigate('Home')。

另一种方法就是navigation.popToTop()，这个方法将会返回到堆栈中的第一个页面上（初始页面），如下所示。

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

四、路由传参

4.1 基本用法

在页面跳转过程中，免不了会进行数据的传递。在React Navigation中，路由之间传递参数主要有两种方式：

将参数封装成一个对象，然后将这个对象作为navigation.navigate方法的第二个参数，从而实现路由跳转参数的传递。
使用route.params()方法读取传递过来的参数。

不管是哪种方式，我们建议对需要传递对数据进行序列化，如下所示。

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在这里插入图片描述

4.2 更新参数

在路由页面上也可以更新这些参数，navigation.setParams()方法就是用来更新这些参数的。当然，我们也可以设置所传参数的默认值，当跳转页面时没有指定这些参数的值，那么他们就会使用默认值。参数的默认值可以在 initialParams属性中指定，如下所示。

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}/>

4.3 返回参数给上一个路由

我们将将数据通过参数的方式传递给一个新的路由页面，也可以将数据回传给先前路由的页面。例如，有一个路由页面，该页面有一个创建帖子的按钮，这个按钮可以打开一个新的页面来创建帖子，在创建完帖子之后，需要想将帖子的一些数据回传给先前的页面。

对于这种需求，我们可以使用navigate来实现。如果路由已经在堆栈中存在了，他们他看起来就像goBack一样，然后只需要将数据绑定到nvigate的params回传给上一页即可，代码如下。

import * as React from 'react';
import { Text, TextInput, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: postText });
        }}
      />
    </>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="CreatePost" component={CreatePostScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

当你点击【Done】按钮后，home页面的route.params将会被更新并刷新文本。

4.4 参数传递给嵌套导航器

如果涉及有嵌套导航器的场景，则需要以稍微不同的方式传递参数。例如，假设在Acount页面嵌套了一个设置页面，并且希望将参数传递到该导航器中的设置页面，那么可以使用下面的方式。

navigation.navigate('Account', {
  screen: 'Settings',
  params: { user: 'jane' },
});

五、导航栏配置

5.1 设置导航栏标题

React Navigation的Screen组件有一个options属性，这个属性包含了很多可配置的选项，例如设置导航栏的标题，如下所示。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

5.2 在标题中使用参数

为了在标题中使用参数，我们可以把options属性定义为一个返回配置对象的方法。即我们可以将options定义为一个方法，React Navigation调用它并为其传入两个可供使用的参数{navigation,route}即可，如下所示。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

传递到options方法中的参数是一个对象，该对象有两个属性navigation和route。

navigation：路由屏幕组件的navigation属性
route：屏幕组件的route属性

5.3 使用setOptions更新options

有时候，我们需要在一个已加载的屏幕组件上更新它的options配置，对于这样的需求，我们可以使用navigation.setOptions来实现。

/* Inside of render() of React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}/>

5.4 设置导航栏的样式

React Navigation支持自定义导航头的样式，我们可以使用如下三个样式属性 headerStyle、headerTintColor和headerTitleStyle，含义如下：

headerStyle：用于设置包裹住导航头的视图样式，比如为导航栏设置背景色。
headerTintColor：回退按钮和title都是使用这个属性来设置他们的颜色。
headerTitleStyle：如果需要自定义字体、字体粗细和其他文本样式，可以使用属性。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

下面是演示示例的链接地址：Try the "header styles" example on Snack
在这里插入图片描述
自定义导航栏样式的时候，有以下几点需要注意：

在IOS上，状态栏文本和图标是黑色的，所以你将背景色设置为暗色的话可能看起来不是很好。
以上的设置仅仅只在home页面有效，当我们跳转到details页面的时候，依然会显示默认的颜色。

5.5 与其他屏幕组件共享options参数

有时候，我们需要多个页面设置相同的导航头样式。那么，我们可以使用堆栈导航器的screenOptions属性。

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }} >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }} />
    </Stack.Navigator>
  );
}

在上面的例子中，任何属于StackScreen的页面都将使用相同样式的导航头。

5.6 自定义的组件来替换title属性

有时候，我们想对title做更多的设置，比如使用一张图片来替换title的文字，或者将title放进一个按钮中，这些场景中我们完全可以使用自定义的组件来覆盖title，如下所示。

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}/>
    </Stack.Navigator>
  );
}

六、导航栏按钮

6.1 为导航栏添加按钮

通常，我们可以使用导航头的按钮来实现路由操作。比如，我们点击导航栏左边的按钮可以返回上一个路由，点击导航头的右边可以进行其他操作，如下所示。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

6.2 导航头与屏幕组件的交互

我们只需要使用navigation.setOptions即可实现按钮与屏幕组件的交互，可以使用navigation.setOptions来访问screen组件的属性如，state和context等。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: props => <LogoTitle {...props} />,
        })}
      />
    </Stack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

6.3 自定义返回按钮

createStackNavigator提供了平台默认的返回按钮，在IOS平台上，在按钮的旁边会有一个标签，这个标签会显示上一页标题的缩写，否则就是一个Back字样。

同样，开发者也可以可以通过设置headerBackTitle和headerTruncatedBackTitle来改变标签的行为，如下所示。

import { HeaderBackButton } from '@react-navigation/stack';

// ...

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
  }}
/>;

七、导航栏的嵌套

导航嵌套指的是一个导航器的导航页中又包含了另一个导航器，例如。

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在上述的例子中，Home组件包含了一个tab导航器。同时，这个Home组件也是堆栈导航器中的一个导航页，从而形成了一个导航嵌套的场景。

导航器的嵌套其实跟我们通常使用的组件的嵌套类似，一般情况下，我们通常会嵌套多个导航器。

7.1 如何实现导航嵌套

实现导航器嵌套时，有以下几点需要特别注意：

1，每个导航器管理自己的导航栈

比如，当你在一个被嵌套的堆栈导航器上点击返回按钮的时候，它会返回到本导航器（就是被嵌套的堆栈导航器）导航历史中的上一页，而不是返回到上级导航器中。

2，导航器的一些特定方法在子导航器中同样可用

在Drawer导航器中嵌套了一个Stack 导航器，那么Drewer导航器的openDrawer、closeDrawer方法在被嵌套的stack导航器的navigation属性中依然是可用的。但是如果Stack导航器没有嵌套在Drawer导航器中，那么这些方法是不可访问的。

同样，如果你在Stack导航器中嵌套了一个Tab导航器，那么Tab导航器页面中的navigation属性会新得到push和replace这两个方法。

3, 被嵌套的导航器不会响应父级导航器的事件

如果Stack导航器被嵌套在tTab导航器中，那么Stack导航器的页面不会响应由父Tab导航器触发的事件，比如我们使用navigation.addListener绑定的tabPress事件。为了能够响应父级导航器的事件，我们可以使用navigation.dangerouslyGetParent().addListener来监听父级导航器的事件。

4，父级导航器先于子导航器被渲染

对于上面的这句话，我们怎么理解呢？在Drawer导航器中嵌套了一个Stack导航器，你会看到抽屉的效果先被渲染出来，接着才是渲染Stack导航器的头部，但是如果将Drawer导航器嵌套在Stack导航器中，那么则会先渲染Stack导航器的头部再渲染抽屉效果。因此，我们可以根据这一现象来确认我们需要选择哪种导航器的嵌套。

7.2 嵌套路由的跳转

我们先来看一下下面这段代码。

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

假如，现在想从Home页面中跳转到Root页面，那么我们可以使用下面的方式。

navigation.navigate('Root');

不过，有时间你可能希望显示自己指定的页面，为了实现这个功能，可以在参数中携带页面的名字，如下所示。

navigation.navigate('Root',{screen:'Settings'});

当然，我们也可以在页面跳转的时候传递一些参数，如下所示。

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

7.3 嵌套多个导航栏

当嵌套多个stack 或者drawer的导航栏时，子导航栏和父导航栏的标题都会显示出来。但是，通常更可取的做法是在子导航器中显示标题，并在堆栈导航器中隐藏标题。此时我们可以使用导航栏的headerShown: false。

function Home() {
  return (
    <NestedStack.Navigator>
      <NestedStack.Screen name="Profile" component={Profile} />
      <NestedStack.Screen name="Settings" component={Settings} />
    </NestedStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator mode="modal">
        <RootStack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <RootStack.Screen name="EditPost" component={EditPost} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

八、导航器的生命周期

在前面的内容中，我们介绍了React Navigation的一些基本用法，以及路由跳转相关的内容。但是，我们并不知道路由是如何实现页面的跳转和返回的。

如果你对前端Web比较熟悉的话，那么你就会发现当用户从路由A跳转到路由B的时候，A将会被卸载（componentWillUnmount方法会被调用）当用户从其他页面返回A页面的时候，A页面又会被重新加载。React 的生命周期方法在React Navigation中仍然有效，不过相比Web的用法不尽相同，且移动端导航更为复杂。

8.1 Example

假设有一个Stack导航器，里面A、B两个页面。当需要跳转到A页面的时候，它的componentDidMount将会被调用。当跳转到B页面的时候，B页面的compouentDidMount也会被调用，但是A页面依然在堆栈中保持被加载的状态，因此A页面的componentWillUnmount方法不会被调用。

但是，当我们从B页面返回到A页面的时候，B页面的compouentWillUnmount则会被调用，但是A页面的componentDidMount不会被调用，因为其没有被卸载，在整个过程中一直保持被加载的状态。

在其他类型的导航器中也是同样的结果，假设有一个Tab导航器，其有两个Tab，每个Tab都是一个Stack导航器。

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

现在，我们从HomeScreen跳转到DetailsScreen页面，然后使用标签栏从SettingScreen 跳转到ProfileScreen。在这一系列操作做完后，所有的四个页面都已经被加载过了，如果你使用标签栏返回到HomeScreen，你会发现DetailsScreen页面到HomeStack的导航状态已经被保存。

8.2 React Navigation生命周期

我们知道，React Native的页面都有自己的生命周期。而React Navigation则是通过将事件发送到订阅他们的页面组件中，并通过focus()和blur()方法监听用户离开返回事件，看下面一段代码。

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });
 
    return unsubscribe;
  }, [navigation]);
 
  return <ProfileContent />;
}

事实上，我们没必要手动添加监听器，可以直接使用useFocusEffect 挂钩来实现生命周期的监听，就像React的useEffect挂钩一样，不同的是，useFocusEffect只能用户导航器的生命周期监听，如下所示。

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

如果你想根据页面是否获得焦点和失去焦点来渲染不同的东西，也可以调用useIsFocused 挂钩，useIsFocused会返回一个布尔值，用来指示该页面是否获得了焦点。

总的来说，React 的生命周期方法仍然可用，除此之外，React Navigation又增加了更多的事件方法，开发者可以通过navigation属性来订阅他们。并且，开发者可以使用useFocusEffect或者useIsFocused实现挂钩。

九、打开一个Modal 全面屏页面

在RN中，Model是一个弹窗组件，它不是导航中的页面，因此其显示与隐藏都有其独特的方式，我们可以使用它展示一些特别的提示信息，如下图所示。
在这里插入图片描述

9.1 创建一个Model堆栈导航器

首先，我们来看一下如下一段代码：

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  );
}
 
function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  );
}
 
function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  );
}
 
const MainStack = createStackNavigator();
const RootStack = createStackNavigator();
 
function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  );
}
 
function RootStackScreen() {
  return (
    <RootStack.Navigator mode="modal">
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Navigator>
  );
}

首先，我们来看一下上面示例中导航器的示意图。
在这里插入图片描述
在上面的示例中，我们使用MainStackScreen作为RootStackScreen的屏幕组件，就相当于我们在一个堆栈导航器中嵌入了另一个堆栈导航器。因此，当我们运行项目时，RootStackScreen会渲染一个堆栈导航器，该导航器有自己的头部，当然我们也可以将这个头部隐藏。

堆栈导航器的model属性值可以是card(默认)或者model。在IOS上，model的展现方式是从底部滑入，退出的时候则是从上往下的方式来关闭它。在Android上，model是无效的属性，因为全面屏的model与android的平台自带的行为没有任何区别。

Model堆栈导航器在React Navigation导航中是非常有用的，如果你想变更堆栈导航器页面的过渡动画，那么就可以使用mode属性。当将其设置为modal时，所有屏幕转换之间的过渡动画就会变为从底部滑到顶部，而不是原先的从右侧滑入。但是，需要注意的是，React Navigation的modal会对整个堆栈导航器起效，所以为了在其他屏幕上使用从右侧滑入的效果，我们可以再另外添加一个导航器，这个导航器使用默认的配置就行。

十、名称解释

10.1 Navigator

Navigator是一个React组件，它决定应用以哪种方式展现已定义的页面。NavigationContainer则是一个管理导航树并包含导航状态的组件，该组件是所有导航器组件的父容器，包装了所有导航器的结构。通常，我们需要将NavigationContainer组件放在应用程序的根目录下，作为启动的根文件。

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator> // <---- This is a Navigator
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

10.2 Router

Router即是路由器，它是一组函数，它决定如何在导航器中处理用户的操作和状态的更改，通常，开发者不需要直接参与路由器交互，除非您需要编写自定义导航器。

每个路由都是一个对象，其中包含标识它的键和指定路由类型的“名称”，并且还可以包含任意类型的参数。

{
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

10.3 Screen component

Screen component即屏幕组件，是我们在路由配置中需要跳转的组件。

const Stack = createStackNavigator();

const StackNavigator = (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen} />
    <Stack.Screen
      name="Details"
      component={DetailsScreen} />
  </Stack.Navigator>
);

需要注意的是，只有当屏幕被React Navigation呈现为一个路由时才能实现跳转功能。例如，如果我们渲染DetailsScreen作为主屏幕的子元素，那么DetailsScreen将不会提供导航道具，当你在主屏幕上按下“Go to Details…”按钮时应用程序会抛出【未定义该对象】”的错误。

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
      <DetailsScreen />
    </View>
  );
}

10.4 Navigation Prop

通过使用Navigation提供的属性，我们可以在两个页面之间传递数据，常用的属性如下。

dispatch：向路由器发送一个动作。
navigate, goBack：打开或者返回页面。

10.5 Navigation State

导航器的状态如下所示。

{
  key: 'StackRouterRoot',
  index: 1,
  routes: [
    { key: 'A', name: 'Home' },
    { key: 'B', name: 'Profile' },
  ]
}

这篇关于React Navigation 5.x详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！