React Native 0.74版本如何实现页面程序化导航？

目前React Native生态中最常用且官方推荐的路由方案是React Navigation，以下是针对0.74版本的具体实现步骤：

1. 安装必要依赖 #

首先安装核心导航库及栈导航相关依赖：

# 使用npm
npm install @react-navigation/native react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

# 使用yarn
yarn add @react-navigation/native react-native-screens react-native-safe-area-context
yarn add @react-navigation/native-stack

2. 配置根导航容器 #

在项目入口文件（通常是App.js）中设置导航栈，定义登录页和注册页的路由：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen 
          name="Login" 
          component={LoginScreen} 
          options={{ title: '登录' }} 
        />
        <Stack.Screen 
          name="Register" 
          component={RegisterScreen} 
          options={{ title: '注册' }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 编写登录页跳转逻辑 #

在LoginScreen.js中，给注册按钮添加跳转事件，通过navigation对象的navigate方法跳转至注册页：

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function LoginScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>登录页</Text>
      {/* 登录相关表单逻辑可在此处添加 */}
      <Button
        title="新用户？点击注册"
        onPress={() => navigation.navigate('Register')}
      />
    </View>
  );
}

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

4. 注册页添加返回逻辑 #

在RegisterScreen.js中，可添加返回按钮，或直接使用导航栏默认的返回箭头：

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function RegisterScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>注册页</Text>
      {/* 注册相关表单逻辑可在此处添加 */}
      <Button
        title="返回登录"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

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

关键说明 #

• initialRouteName="Login"设置App启动时默认显示登录页
• 每个页面组件会自动接收navigation参数，用于路由跳转操作
• 若需要隐藏导航栏，可在对应Stack.Screen的options中添加headerShown: false

内容的提问来源于stack exchange，提问作者Pranav Arute