React Navigation 堆栈屏幕之间的 React hook 状态变量共享？

Question

编辑：对于那些绊脚石的人，请忽略这个问题。这对我来说是一个简单的错误。屏幕组件之间的 React hook 变量共享工作正常。

我的 App.js 文件如下

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Main from './src/Main';
import Game from './src/Game';
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Game" component={Game} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Main.js（相关部分）

export default function Main({ navigation }) {
  const [username, setUsername] = useState(null);
  ...
  <TextInput
    mode='outlined'
    label='Enter username here'
    onChangeText={text => setUsername(text)}
  />
  <Button
    mode='contained'
    onPress={() => 
      navigation.navigate('Game', {'username': username})
    }
  >
    Create
  </Button>
  ...

Game.js（相关部分）

export default function Game({ navigation, route }) {
  return (
    <View>
      <Text>
        {route.params.username}
      </Text>
    </View>
  );
}

如何使用 React hooks 将我的 username 状态变量从我的 Main 组件传递到我的 Game 组件？目前我在 Game.js 中的 {route.params.username} 行收到以下错误：

Objects are not valid as a React child (found: object with keys {replace, push, pop, popToTop, goBack, navigate, reset, setParams, dispatch, isFocused, canGoBack, dangerouslyGetParent, dangerouslyGetState, addListener, removeListener, setOptions}).

我只想传递在 Main 屏幕中的按钮被点击后 username 的最新字符串值（应该导航到 Game 屏幕），但似乎传入的值是一个对象。

Answer 1

您在问题中发布的代码工作正常，但我想我是通过查看您的零食发现问题的。

第一件事是您的 utils.createGame 函数需要一个参数 username，但是您将 navigation 传递给它并且 username 像这样：

onPress={() =>
  utils.createGame(navigation, username).then(payload => {
    navigation.navigate("Game", payload);
  })
}

因此删除 navigation 作为参数：

onPress={() =>
  utils.createGame(username).then(payload => {
    navigation.navigate("Game", payload);
  })
}

同样的事情也发生在 utils.addPlayer 中，函数有两个参数，但你传递了三个。

为了提供更多上下文，同时解决另一个问题，请将 utils 的定义更改为：

const utils = {
  createGame: async function(username) {
    const gameId = cryptorandomstring({ length: 6, type: 'distinguishable' });
    const playerId = cryptorandomstring({ length: 10 });

    return { 'gameId': gameId, 'creatorId': playerId, 'username': username };
  },

  addPlayer: async function(username, gameId) {
    const playerId = cryptorandomstring({ length: 10 });

    return { 'gameId': gameId, 'playerId': playerId, 'username': username };
  }
}

在 addPlayer 中你有这样一个 return 语句：

return { 'gameId': gameId, 'playerId': playerId, 'playerUserName': username };

这个问题是在 Game.js 中，你正在从参数而不是 playerUserName 中解构 username。因此，解构的 username 变量不会保存正确的值。

React Navigation 堆栈屏幕之间的 React hook 状态变量共享？

React hook state variable sharing between React Navigation stack screens?

reactjs

react-native

react-navigation

react-hooks

react-navigation-v5