react native-1.1.堆栈导航 StackNavigator

堆栈导航 react-navigation

在 Web 浏览器中，您可以使用锚 ( <a>) 标记链接到不同的页面。当用户单击链接时，URL 会被推送到浏览器历史记录堆栈中。当用户按下后退按钮时，浏览器会从历史堆栈顶部弹出该项目，因此活动页面现在是以前访问过的页面。

React Navigation 的堆栈导航器为应用程序提供了一种在屏幕之间转换和管理导航历史记录的方法。

如果您的应用程序仅使用一个堆栈导航器，那么它在概念上类似于 Web 浏览器处理导航状态的方式 – 当用户与其交互时，您的应用程序会从导航堆栈中推送和弹出项目，这会导致用户看到不同的屏幕。

Web 浏览器和 React Navigation 中的工作方式之间的一个关键区别在于，React Navigation 的堆栈导航器提供了在 Android 和 iOS 上在堆栈中的路由之间导航时所期望的手势和动画。

安装依赖

# 安装导航的核心库
yarn add @react-navigation/native

# 安装导航的外部依赖库
yarn add react-native-screens react-native-safe-area-context

# 安装堆栈导航的主要库
yarn add @react-navigation/native-stack

创建路由器

1、首先创建路由导航容器，将我们的路由都包裹（一般是在App.js中），有点类似于Vue的<router-view />：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
return (
<NavigationContainer>
{/* 导航组件 */}
</NavigationContainer>
);
}

NavigationContainer

是管理导航树并包含导航状态的组件。该组件必须包装所有导航器结构。通常，我们会在应用程序的根目录渲染此组件，这通常是从App.js.

2、使用createNativeStackNavigator函数，配置堆栈路由。

createNativeStackNavigator

返回包含 2 个属性的对象的函数（它们都是用于配置导航器的 React 组件。）：

Screen

Navigator

// 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>
);
}
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>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

export default App;

initialRouteName

配置初始化的路由，可以设置成非第一个Screen页面

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

options

每个路由上通过 options 配置不同参数，比如标题、导航栏颜色等：

<Stack.Screen
name=”Home”
component={HomeScreen}
options={{
title: ‘首页’,
headerStyle: {
height: 80,
backgroundColor: ‘#2196F3’,
},
}}
/>

堆栈跳转

现在我们的堆栈有两条路线，一条Home路线和一条Details路线。可以使用组件来指定路线Screen。

该Screen组件接受一个name与我们将用于导航的路线名称相对应的 prop，以及一个component与它将渲染的组件相对应的 prop。

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

传递额外数据

1. 使用React 上下文并使用上下文提供程序包装导航器以将数据传递到屏幕（推荐）。
2. 对屏幕使用渲染回调而不是指定componentprop
   <Stack.Screen name=”Home”>
   {(props) => <HomeScreen {…props} extraData={someData} />}
   </Stack.Screen>