React Navigation 初探 - 创建 native stack navigator

React Navigation 初探 - 创建 native stack navigator

安装 @react-navigation/native-stack

上一章节我们安装的是导航器的构建模块和基础模块, React Navigation 中的每个 navigator 都有自己库, 使用native stack navigator我们需要安装@react-navigation/native-stack :

npm: npm install @react-navigation/native-stack
或
Yarn: yarn add @react-navigation/native-stack

@react-navigation/native-stack 依赖于 react-native-screens 和我们在之前安装的其他库,如果没有安装,请移步上一章进行操作.

创建 native stack navigator

createNativeStackNavigator 是一个函数,他返回两个对象属性: Screen 和 Navigator.他们都是用来配置React的组件. Navigator 应该包含一个 Screen 作为其子路的配置.

NavigationContainer 是一个管理导航树和包含导航状态的组件.这个组件包含所有导航的结构.通常我们在 app 的根目录渲染这个组件(通常在 App.js渲染).

在 snack 尝试这个例子

// 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 { createNativeStackNavigator } from '@react-navigation/native-stack';

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

const Stack = createNativeStackNavigator();

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

export default App;

配置导航器

向 native stack navigator 添加新的页面,设置 Home 为首选渲染页面.

在 snack 尝试这个例子

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

const Stack = createNativeStackNavigator();

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. 堆栈路由初始化的路由为 Home,可以通过修改Navigator 的 initialRouteName 的值修改初始化路由(修改后需要重新运行才会生效).

指定选项

导航器中的每个页面都可以指定一些选项,比如呈现的标题,这些都可以在 options中设置.

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