React Native - 路由

React Native - 导航

导航几乎是任何移动应用程序的核心部分。在 React Native 中，最广泛采用的导航解决方案是 React Navigation。它是一个独立的库，提供了一整套导航器（如堆栈导航 Stack、Tab 导航、抽屉导航 Drawer 等）。

首先，安装核心库和必要的依赖项。如果你使用 Yarn：

yarn add @react-navigation/native react-native-screens react-native-safe-area-context

或者使用 npm：

npm install @react-navigation/native react-native-screens react-native-safe-area-context

在本教程中，我们将演示堆栈导航（stack navigation）。安装堆栈导航器：

yarn add @react-navigation/stack

或者使用 npm：

npm install @react-navigation/stack

如果你使用的是一个 Bare React Native 项目（通过 react-native init 创建），你还需要链接这些原生依赖项。对于 iOS，导航到你的 ios 目录并运行 pod install。

步骤 2: 创建屏幕组件

我们来创建两个简单的屏幕组件：HomeScreen 和 DetailsScreen。

HomeScreen.js：

<html>
 <body>
  <p>
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    &lt;View style={styles.container}&gt;
      &lt;Text style={styles.text}&gt;Home Screen&lt;/Text&gt;
      &lt;Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
      /&gt;
    &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 20, marginBottom: 20 },
});

export default HomeScreen;
  </p>
 </body>
</html>

DetailsScreen.js：

<html>
 <body>
  <p>
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

function DetailsScreen({ route, navigation }) {
  // Get params passed from HomeScreen
  const { itemId, otherParam } = route.params;
  return (
    &lt;View style={styles.container}&gt;
      &lt;Text style={styles.text}&gt;Details Screen&lt;/Text&gt;
      &lt;Text style={styles.text}&gt;itemId: {JSON.stringify(itemId)}&lt;/Text&gt;
      &lt;Text style={styles.text}&gt;otherParam: {JSON.stringify(otherParam)}&lt;/Text&gt;
      &lt;Button title="Go to Details... again!" onPress={() => navigation.push('Details', { itemId: Math.floor(Math.random() * 100) })} /&gt;
      &lt;Button title="Go to Home" onPress={() => navigation.navigate('Home')} /&gt;
      &lt;Button title="Go back" onPress={() => navigation.goBack()} /&gt;
    &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 18, marginBottom: 10 },
});

export default DetailsScreen;
  </p>
 </body>
</html>

步骤 3: 在 App.js 中配置导航器

现在，在你的主 App.js 文件中设置导航结构。

App.js：

<html>
 <body>
  <p>
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen'; // Assuming HomeScreen.js is in the same directory
import DetailsScreen from './DetailsScreen'; // Assuming DetailsScreen.js is in the same directory

const Stack = createStackNavigator();

function App() {
  return (
    &lt;NavigationContainer&gt;
      &lt;Stack.Navigator initialRouteName="Home"&gt;
        &lt;Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} /&gt;
        &lt;Stack.Screen name="Details" component={DetailsScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
  );
}

export default App;
  </p>
 </body>
</html>

输出：应用程序将从 ‘Home’ 屏幕开始。点击 ‘Go to Details’ 按钮将导航到 ‘Details’ 屏幕，并传递参数。‘Details’ 屏幕将显示这些参数，并提供进一步导航或返回的按钮。React Navigation 会自动在 ‘Details’ 屏幕的头部（header）提供一个返回按钮。

React Navigation 功能非常强大，提供许多特性，例如 Tab 导航、抽屉导航（drawer navigation）、自定义头部（custom headers）和深层链接（deep linking）。有关完整的文档和更多示例，请访问 React Navigation 官方网站。

React Native - 路由

React Native - 导航

步骤 1: 安装 React Navigation

步骤 2: 创建屏幕组件

步骤 3: 在 App.js 中配置导航器