反应窗口导航 - Javascript

反应窗口导航（React Navigation）是一个用于 React Native 应用程序的导航库，它可以在多个平台上提供组合和导航解决方案。它可以轻松地实现 iOS 和 Android 平台的导航和标签式导航等功能。

安装

使用 React Navigation 首先需要安装以下依赖：

npm install @react-navigation/native

# 下列依赖是针对不同导航选项而可选
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

基本导航

在 React Navigation 中，我们可以使用一个 Stack Navigation（堆栈导航）来实现最基本的导航功能。一般情况下每一屏都会放在一个页面组件中。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

上面的代码展示了一个基本的 Stack Navigation。包含两个屏幕：Home 屏幕和 Details 屏幕。当点击 Home 屏幕上的按钮时，我们将导航到 Details 屏幕。

属性

创建 Stack.Navigator 及其子 Navigator 时，有一些可用的属性可以用来控制导航器的行为和样式。

initialRouteName

初始路由名称

<Stack.Navigator initialRouteName="Home">

screenOptions

所有屏幕的默认选项

<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>

headerShown

是否显示标题栏

<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />

headerTitle

标题栏标题

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

headerTitleStyle

标题栏标题的样式

<Stack.Screen name="Home" component={HomeScreen} options={{ headerTitleStyle: { fontWeight: 'bold' } }} />

导航

React Navigation 提供了一些针对 Stack Navigation 的导航方法。这些方法可以让我们在屏幕之间进行导航。

navigate

导航到指定屏幕

const navigation = useNavigation();
<Button title="Go to Details" onPress={() => { navigation.navigate('Details') }} />

push

压入新的屏幕

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

goBack

返回上一个屏幕

const navigation = useNavigation();
<Button title="Go back" onPress={() => { navigation.goBack() }} />

pop

弹出当前屏幕

const navigation = useNavigation();
<Button title="Go back" onPress={() => { navigation.pop() }} />

结论

React Navigation 提供了一系列强大的 API 和可配置选项，可以为您的应用程序提供多种导航方式。通过深入研究，您可以更好地了解如何利用这些功能来创建复杂的应用程序。