React Navigation：当值来自 redux 并在子级中更新时，如何更新父级的导航标题

在 React Native 开发中，React Navigation 是一个常用的导航库，它提供了一种灵活而强大的方式来管理应用程序的导航。当我们需要从 Redux 中获取数据并在子级组件中更新时，我们可能会遇到一个问题：如何更新父级导航的标题？

npm install @react-navigation/native @react-navigation/stack react-redux

javascript
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
const CounterScreen = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();
  const increaseCounter = () => {
    dispatch({ type: 'INCREASE_COUNTER' });
  };
  return (
    
      Counter: {counter}
      
    
  );
};
export default CounterScreen;

javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useSelector } from 'react-redux';
import CounterScreen from './CounterScreen';
const AppStack = createStackNavigator();
const AppNavigator = () => {
  const counter = useSelector(state => state.counter);
  return (
    
      
                  name="Counter"
          component={CounterScreen}
          options={({ navigation }) => ({
            title: {`Counter: ${counter}`},
            headerTitleAlign: 'center',
          })}
        />
      
    
  );
};
export default AppNavigator;