如何在React Native中将useState状态传递到其他页面？

下面提供几种可行的方案，根据你的实际场景选择：

方案1：路由参数传递（适合单次简单传值） #

这种方法适合仅需要给初始页面传递状态的场景：

1. 修改App.js，将appState传给Navigator组件：

export default function App() {
  const initialAppState = {
    firstName: "Jim",
    lastName: "Smith"
  }
  const [appState, setAppState] = useState(initialAppState);

  return (
       <NavigationContainer>
          <Navigator appState={appState} /> {/* 传递appState */}
          <NavBar />
       </NavigationContainer>
  );
};

2. 在Navigator组件中，通过initialParams把状态传给HomeScreen：

export default function AppNavigator({ appState }) {
    const Stack = createStackNavigator();
    return (
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          initialParams={appState} // 把appState作为初始参数传递
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  };

3. 在HomeScreen中通过route.params获取状态：

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

export default function HomeScreen({ route }) {
  const { firstName, lastName } = route.params;
  return (
    <View>
      <Text>My name is: {firstName} {lastName}</Text>
    </View>
  );
}

方案2：React Context全局共享（适合多组件需要访问状态） #

如果你的多个页面都需要用到这个状态，或者后续需要修改状态并同步，推荐用Context：

1. 创建一个Context文件（比如AppContext.js）：

import { createContext, useContext } from 'react';

const AppContext = createContext();

// 提供状态的Provider组件
export function AppProvider({ children, appState, setAppState }) {
  return (
    <AppContext.Provider value={{ appState, setAppState }}>
      {children}
    </AppContext.Provider>
  );
}

// 自定义Hook，方便组件获取状态
export function useAppContext() {
  return useContext(AppContext);
}

2. 在App.js中用AppProvider包裹整个应用：

import { AppProvider } from './AppContext'; // 导入刚才创建的Provider

export default function App() {
  const initialAppState = {
    firstName: "Jim",
    lastName: "Smith"
  }
  const [appState, setAppState] = useState(initialAppState);

  return (
    <AppProvider appState={appState} setAppState={setAppState}>
      <NavigationContainer>
        <Navigator />
        <NavBar />
      </NavigationContainer>
    </AppProvider>
  );
};

3. 在HomeScreen中通过自定义Hook获取状态：

import React from 'react';
import { View, Text } from 'react-native';
import { useAppContext } from './AppContext'; // 导入自定义Hook

export default function HomeScreen() {
  const { appState } = useAppContext();
  return (
    <View>
      <Text>My name is: {appState.firstName} {appState.lastName}</Text>
    </View>
  );
}

方案3：直接通过Props传递（适合层级较浅的场景） #

如果你的组件层级不多，也可以直接通过props逐层传递：

1. 修改App.js，给Navigator传appState：

export default function App() {
  const initialAppState = {
    firstName: "Jim",
    lastName: "Smith"
  }
  const [appState, setAppState] = useState(initialAppState);

  return (
       <NavigationContainer>
          <Navigator appState={appState} />
          <NavBar />
       </NavigationContainer>
  );
};

2. 在Navigator中，用匿名组件包装HomeScreen并传递props：

export default function AppNavigator({ appState }) {
    const Stack = createStackNavigator();
    return (
      <Stack.Navigator initialRouteName='Home'>
        <Stack.Screen name="Home">
          {/* 用匿名组件包装，把appState传给HomeScreen */}
          {props => <HomeScreen {...props} appState={appState} />}
        </Stack.Screen>
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  };

3. 在HomeScreen中直接接收appState props：

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

export default function HomeScreen({ appState }) {
  return (
    <View>
      <Text>My name is: {appState.firstName} {appState.lastName}</Text>
    </View>
  );
}

另外需要说明：你之前用<Navigator ref={appState}/>的方式是错误的，ref的作用是获取组件的实例对象，并不是用来传递状态的，所以这种方法根本无法实现状态传递。

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