Question

问题在于，当我移至某个屏幕时，我的headerTitle仅设置初始 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>
  );
};

Answer 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

route.params永远不会更新反应导航v5

1 个答案: