React Native 中如何导航不同的页面？

推荐答案

在 React Native 中，导航不同的页面通常使用 React Navigation 库。以下是一个简单的示例，展示如何使用 React Navigation 进行页面导航：

// www.javascriptcn.com code example
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>
  );
}

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>
  );
}

export default App;

本题详细解读

1. 安装 React Navigation

首先，你需要安装 React Navigation 及其依赖项：

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-get-random-values

2. 创建导航器

使用 createStackNavigator 创建一个堆栈导航器。堆栈导航器允许你在页面之间进行导航，并且会自动处理页面的堆栈管理。

const Stack = createStackNavigator();

3. 定义屏幕组件

定义你的屏幕组件，例如 HomeScreen 和 DetailsScreen。每个屏幕组件都可以通过 navigation 对象进行导航。

// www.javascriptcn.com code example
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>
  );
}

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

4. 配置导航器

在 App 组件中，使用 NavigationContainer 包裹你的导航器，并配置初始路由和屏幕组件。

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

5. 导航到其他页面

在 HomeScreen 中，使用 navigation.navigate('Details') 来导航到 DetailsScreen。navigate 方法接受目标页面的名称作为参数。

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

通过以上步骤，你可以在 React Native 应用中实现页面导航。