React Native中如何在其他函数页面使用useState定义的状态变量

React 组件中通过 useState 定义的状态是局部私有的，仅在当前组件内部可访问。你在 logIn 登录组件内定义的 username 属于组件内部状态，独立的 HomeScreen 组件没有访问权限，因此会触发username 变量未定义的报错。

方案1：路由传参（当前场景最优轻量方案） #

你使用的 React Navigation 路由原生支持跳转时携带参数，仅需修改两处代码即可解决问题：

1. 修改 logIn 组件的跳转逻辑，将 username 作为参数传递给 Home 路由

function logIn({ navigation }) {
  
  const [username, setUsername] = useState('');

  return (
    <View  style={{ backgroundColor: "white"}} >
      <View>
        <TextInput style={styles.input}  placeholder='username' placeholderTextColor='white' textAlign='center' onChangeText={(val) => setUsername(val)} />
      </View>
      <View>
      {/* 跳转时携带username参数 */}
      <Button title="Go to Home" onPress={() => navigation.navigate('Home', { username: username })} />
      </View>
    </View>
  );
}

2. 修改 HomeScreen 组件，接收并读取路由参数

// 组件props新增route参数，路由携带的参数都存在route.params中
function HomeScreen({ navigation, route }) {
  // 提取username，添加默认值避免参数未传时报错
  const username = route.params?.username ?? '访客'
  return(
    <View style={{ flex:1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Welcome {username}</Text>
    </View>
  );
}

方案2：全局状态管理（适合多组件共享用户信息的复杂场景） #

如果你的项目中多个页面都需要用到用户身份信息，可以选择全局状态管理方案：

• 轻量项目可直接使用 React 内置的 Context API，将用户信息存在全局 Context 中，登录后更新 Context 状态，所有业务组件都可以直接读取用户信息
• 中大型项目可搭配第三方状态库使用，例如 Zustand、Redux、MobX 等，统一维护全局用户状态

方案3：本地持久化存储（需要保留登录状态的场景） #

如果需要实现APP关闭重启后仍然保留登录身份，可以把用户信息写入本地持久化存储，例如使用 @react-native-async-storage/async-storage 库：登录成功后将用户名写入本地存储，HomeScreen 初始化时从本地存储读取用户名展示即可。

内容的提问来源于stack exchange，提问作者Vojta Simek