React中如何将Start页面的username状态传递到Profile页面显示？

方案1：路由传参（仅需单次传值时使用） #

适合只需要在跳转时把用户名传给目标页面、不需要多页面共享的场景：

1. 修改Start.js的跳转逻辑，携带参数：

const buttonPress = ()=> {
    console.log(username)
    // 跳转时把username作为路由参数传递
    navigation.navigate("Main", { username })
}

2. 接收参数（分两种情况）：

• 如果Profile是直接接收路由的页面，直接从route参数中取：

// Profile组件顶部先解构route参数
const Profile = ({ route }) => {
  // 取参数，设置默认值避免undefined报错
  const { username = '游客' } = route.params || {};

  // 原有代码不变
  return (
    <TouchableOpacity>
      <Title style={styles.text}>Hello {username}!</Title>
    </TouchableOpacity>
  )
}

• 如果Profile是Main页面的子组件，先在Main页面取到路由参数，再通过props传给Profile即可。

方案2：全局状态共享（多页面频繁使用username时使用） #

如果多个页面都需要用到用户名，反复传参太繁琐，可以用React Context做全局状态管理：

1. 新建UserContext.js文件存放全局状态：

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

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [username, setUsername] = useState('');
  return (
    <UserContext.Provider value={{ username, setUsername }}>
      {children}
    </UserContext.Provider>
  )
}

// 封装自定义hook，简化调用
export const useUser = () => useContext(UserContext);

2. 在根组件（通常是App.js）中包裹全局状态Provider：

import { UserProvider } from './UserContext';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <UserProvider>
      {/* 原有导航容器、路由配置全部放在Provider内部 */}
      <NavigationContainer>
        {/* 你的原有路由代码 */}
      </NavigationContainer>
    </UserProvider>
  )
}

3. 修改Start.js，使用全局状态存用户名：

import { useUser } from './UserContext';

// 引入全局的setUsername方法
const { setUsername: setGlobalUsername } = useUser();
const [username, setUsername] = useState("")

const changeHandler = (val) => {
    setUsername(val)
}

const buttonPress = ()=> {
    // 提交时把用户名存入全局状态，所有组件都能访问
    setGlobalUsername(username)
    console.log(username)
    navigation.navigate("Main")
}

4. 在Profile.js中直接取全局用户名：

import { useUser } from './UserContext';

const Profile = () => {
  const { username } = useUser();
  return (
    <TouchableOpacity>
      <Title style={styles.text}>Hello {username || '游客'}!</Title>
    </TouchableOpacity>
  )
}

如果需要APP重启后依然保留用户名，可以在存入全局状态的同时，把用户名写入AsyncStorage，APP启动时读取存储的值初始化全局状态即可。

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