route.params 从不更新反应导航 v5答案

【问题标题】：route.params never updates react navigation v5route.params 从不更新反应导航 v5
【发布时间】：2020-10-12 10:22:40
【问题描述】：

问题是当我移动到某个屏幕时，我的 headerTitle 只设置 initial route.params.counter 值，但即使计数器值每秒都在变化，它也不会更新。

我的“ChatMessage”屏幕中的route.params.counter 根本没有更新，该值是屏幕安装时的初始值。如果我回去，计数器会像预期的那样更新，但是一旦我再次按下按钮移动到“ChatMessage”屏幕，它只有在安装之前最后捕获的计数器值。执行 console.log 确认 route.params.counter 值保持不变，除非我返回并再次按下按钮，否则它永远不会改变。

我目前有一个订阅，它大约每 30 秒更新一次，它告诉我我的用户是否在线，我用计时器表示此订阅。

您可以查看此snack，它演示了下一个屏幕中 route.params 未更新的问题。

如何使用功能组件根据我的计数器值动态更改标题标题？

这是我的堆栈导航设置

export default function MainStack({ navigation }) {
  return (
    <Stack.Navigator
        {...}
    >
      <Stack.Screen
         {...}
      />
      <Stack.Screen
        {...}
      />
      <Stack.Screen
        options={({ route }) => ({
          headerTitle: route.params.counter,
          headerTitleAlign: 'center',
          headerBackTitleVisible: true
        })}
        name='ChatMessage'
        component={ChatMessage}
      />
    </Stack.Navigator>
  );
}

这是我的组件

export default () => {
  const [counter, setCounter] = useState(0);
  // (hooks)
  const navigation = useNavigation();

  useEffect(() => {
    function fn01sec() {
      setCounter((prevCount) => prevCount + 1);

     // does nothing ive tried
     // navigation.setParams('ChatMessage', {
     //   counter: counter
     // });
    }
    fn01sec();
    const interval = setInterval(fn01sec, 1000);

    return function cleanup() {
      clearInterval(interval);
    };
  }, []);

  return (
    <ChannelWrapper>
      <Button
        title='go next screen'
        onPress={() =>
          navigation.navigate('ChatMessage', {
            counter: counter
          })
        }
      />
      <Text>counter: {counter}</Text>
    </ChannelWrapper>
  );
};

【问题讨论】：

标签： javascript reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

如果您将动态道具作为聊天<Stack.Screen /> 组件的子组件的道具传递怎么办？

<Stack.Screen name="ChatMessage">
  {props => <ChatMessage headerTitle={route.params.counter} headerTitleAlign="center" headerBackTitleVisible {...props} />}
</ Stack.Screen>

我在遇到类似情况时遇到了困难，这种方法为我解决了问题。

参考：https://reactnavigation.org/docs/screen/#children

【讨论】：