React Native项目中如何跨屏幕传递状态变量？

方案1：React Context API（推荐轻量场景） #

如果只是在少数几个屏幕共享这两个状态，Context是最直接的选择，无需额外依赖。

步骤1：创建Context和Provider组件 #

新建AuthContext.js文件：

import { createContext, useContext, useState } from 'react';

// 创建Context
const AuthContext = createContext();

// 封装Provider，包裹需要共享状态的组件树
export function AuthProvider({ children }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <AuthContext.Provider value={{ email, password, setEmail, setPassword }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化Context调用
export function useAuth() {
  return useContext(AuthContext);
}

步骤2：用Provider包裹根组件 #

在App入口文件（如App.js）中，将路由或整个App用AuthProvider包裹：

import { AuthProvider } from './AuthContext';
import { NavigationContainer } from '@react-navigation/native';
import LoginScreen from './LoginScreen';
import HomeScreen from './HomeScreen';

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        {/* 你的路由配置 */}
      </NavigationContainer>
    </AuthProvider>
  );
}

步骤3：在登录屏幕使用状态 #

修改登录屏幕代码，通过useAuth获取状态和更新方法：

import { useAuth } from './AuthContext';
import { View, TextInput } from 'react-native';
import styles from './styles';

export default function LoginScreen() {
  const { email, password, setEmail, setPassword } = useAuth();
  const passWord = React.createRef();

  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.input}
        returnKeyType="next"
        onSubmitEditing={() => passWord.current.focus()}
        blurOnSubmit={false}
        placeholder="Email Address"
        placeholderTextColor={'gray'}
        value={email}
        onChangeText={text => setEmail(text)}
      />
      {/* 密码输入框同理 */}
      <TextInput
        ref={passWord}
        style={styles.input}
        secureTextEntry
        placeholder="Password"
        placeholderTextColor={'gray'}
        value={password}
        onChangeText={text => setPassword(text)}
      />
    </View>
  );
}

步骤4：在其他屏幕访问状态 #

比如在HomeScreen中：

import { useAuth } from './AuthContext';
import { View, Text } from 'react-native';

export default function HomeScreen() {
  const { email } = useAuth();
  return (
    <View>
      <Text>当前登录邮箱：{email}</Text>
    </View>
  );
}

方案2：路由跳转传递参数（适合一次性传值） #

如果只是跳转时临时传递这两个值，不需要长期共享，可直接通过路由参数传递：

登录屏幕跳转时传参 #

基于React Navigation的示例：

import { useNavigation } from '@react-navigation/native';
import { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigation = useNavigation();

  const handleNavigate = () => {
    navigation.navigate('Home', { email, password });
  };

  return (
    <View style={styles.inputContainer}>
      {/* 输入框代码 */}
      <Button title="跳转" onPress={handleNavigate} />
    </View>
  );
}

目标屏幕接收参数 #

import { useRoute } from '@react-navigation/native';
import { View, Text } from 'react-native';

export default function HomeScreen() {
  const route = useRoute();
  const { email, password } = route.params || {};

  return (
    <View>
      <Text>邮箱：{email}</Text>
      <Text>密码：{password}</Text>
    </View>
  );
}

注意：这种方式的参数是一次性的，屏幕刷新或返回后重新进入会丢失，仅适合临时传递场景。

方案3：useReducer + Context（适合复杂状态逻辑） #

如果后续需要扩展登录相关逻辑（如验证、状态重置），用useReducer替代useState能让状态管理更清晰：

import { createContext, useContext, useReducer } from 'react';

const AuthContext = createContext();

// 定义状态处理函数
function authReducer(state, action) {
  switch (action.type) {
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    case 'SET_PASSWORD':
      return { ...state, password: action.payload };
    case 'CLEAR_AUTH':
      return { email: '', password: '' };
    default:
      return state;
  }
}

export function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, { email: '', password: '' });

  return (
    <AuthContext.Provider value={{ ...state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

在登录屏幕使用：

const { email, dispatch } = useAuth();
// 更新邮箱
onChangeText={text => dispatch({ type: 'SET_EMAIL', payload: text })}

方案选择建议 #

• 仅简单共享两个状态：优先选Context + useState
• 跳转时临时传值：用路由参数
• 有复杂状态逻辑或后续需扩展：选Context + useReducer

内容的提问来源于stack exchange，提问作者Matthew Niculae