重写标题标题React Navigation V5

Question

我在堆栈导航器中创建了一个嵌套的选项卡导航器，如下所示：

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator();

function TabNav () {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
      <Tab.Screen name="Category" component={CategoryScreen}></Tab.Screen>
      <Tab.Screen name="Settings" component={SettingsScreen}></Tab.Screen>
    </Tab.Navigator>
  )
} 

export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Tab" component={TabNav}></Stack.Screen>
          <Stack.Screen name="Category" component={CategoryScreen}>
          </Stack.Screen>
          <Stack.Screen
            name="SpecialBeerScreen" component= {SpecialBeerScreen}>
          </Stack.Screen>
        </Stack.Navigator>
    </NavigationContainer>
  )
}

但是，每个屏幕的标题现在看起来都像Tab。如何使用自定义文本（例如主页，类别等）覆盖每个屏幕的此标题。

我已经在堆栈导航器中创建了一个嵌套的标签导航器，如下所示：const Stack = createStackNavigator（）const Tab = createBottomTabNavigator（）;函数TabNav（）{返回（] >>>

Answer 1

如果我正确理解了您的问题，则您希望在更改选项卡时更改堆栈标题。在这种情况下，您可以使用React Context对其进行控制。

const HomeTitleContext = React.createContext({
    title: 'default title',
    setTitle: () => {},
});

export default function App() {
    const [title, setTitle] = useState('default title');
    return (
        <HomeTitleContext.Provider
            value={{
                title,
                setTitle,
            }}
        >
            <HomeTitleContext.Consumer>
                {(ctx) => (
                    <NavigationContainer>
                        <Stack.Navigator>
                            <Stack.Screen
                                name="Tab"
                                component={TabNav}
                                options={{ title: ctx.title }} // The title will be dynamically changed here
                            />
                            <Stack.Screen
                                name="Category"
                                component={OtherScreen}
                            ></Stack.Screen>
                            <Stack.Screen
                                name="SpecialBeerScreen"
                                component={OtherScreen}
                            ></Stack.Screen>
                        </Stack.Navigator>
                    </NavigationContainer>
                )}
            </HomeTitleContext.Consumer>
        </HomeTitleContext.Provider>
    );
}
在您的组件中，例如：HomeScreen，您设置了useFocusEffect并从setTitle更改了标题（将从上下文中获得）