React Native中如何从启动页（Splash Screen）跳转至登录页？

嘿，我来帮你搞定这个启动页跳转的问题！作为React Native新手，路由跳转确实是刚开始容易卡壳的点，咱们一步步来梳理～

首先要明确：React Native本身并没有内置页面跳转的能力，你需要用专门的导航库来实现页面切换，目前最常用的是@react-navigation/native系列库。你之前的代码里应该是没配置导航，所以才跳不动。

下面是完整的解决方案，跟着做就能搞定：

第一步：安装导航依赖 #

先打开终端，在你的项目根目录下安装核心导航库和栈导航组件：

# 安装核心导航库
npm install @react-navigation/native
# 安装栈导航
npm install @react-navigation/native-stack
# 安装原生依赖（裸RN项目需要，Expo项目用expo install代替npm install）
npm install react-native-screens react-native-safe-area-context

第二步：拆分组件并配置导航 #

把你的启动页和登录页拆成独立组件，然后在主入口配置导航栈：

1. 启动页组件（新建SplashScreen.js）

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

export default class SplashScreen extends Component {
  componentDidMount() {
    // 模拟启动页停留2秒，实际项目里可以在这里做资源加载、登录状态检查等
    setTimeout(() => {
      // 跳转到登录页，这里的'Login'要和后面导航栈里的名字一致
      this.props.navigation.navigate('Login');
    }, 2000);
  }

  render() {
    return (
      <View style={styles.container}>
        {/* 替换成你的启动页图片 */}
        <Image source={require('./assets/splash-logo.png')} style={styles.logo} />
        <Text style={styles.appName}>我的示例应用</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  logo: {
    width: 160,
    height: 160,
    marginBottom: 25,
  },
  appName: {
    fontSize: 26,
    fontWeight: '600',
    color: '#333',
  },
});

2. 登录页组件（新建LoginScreen.js）

import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity } from 'react-native';

export default class LoginScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>登录</Text>
        <TextInput style={styles.input} placeholder="请输入用户名" />
        <TextInput style={styles.input} placeholder="请输入密码" secureTextEntry />
        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.btnText}>登录</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 25,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 35,
  },
  input: {
    height: 52,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 18,
  },
  loginBtn: {
    backgroundColor: '#2563eb',
    height: 52,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
});

3. 主入口App.js配置导航

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

// 创建栈导航实例
const Stack = createNativeStackNavigator();

export default function App() {
  return (
    {/* 导航容器，必须包裹所有路由组件 */}
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName="Splash" // 设置启动时默认显示的页面
        screenOptions={{ headerShown: false }} // 隐藏顶部导航栏
      >
        {/* 注册启动页路由 */}
        <Stack.Screen name="Splash" component={SplashScreen} />
        {/* 注册登录页路由 */}
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关键注意点 #

• 所有需要跳转的组件必须在Stack.Screen里注册，这样才能通过this.props.navigation拿到导航方法
• navigate方法里的参数要和Stack.Screen的name属性完全一致
• 如果你的启动页需要做异步操作（比如请求接口检查登录状态），可以把setTimeout换成async/await的逻辑，等操作完成后再跳转

这样配置完，启动应用就会先显示启动页，2秒后自动跳转到登录页啦～

内容的提问来源于stack exchange，提问作者Abhishek D