React native 如何使react-navigation-v5中的所有选项卡具有相同的标题?

React native 如何使react-navigation-v5中的所有选项卡具有相同的标题?,react-native,react-navigation-v5,react-navigation-bottom-tab,React Native,React Navigation V5,React Navigation Bottom Tab,我正在我的react本机应用程序中使用react navigation v5。应用程序由4个底部选项卡组成,所有选项卡都有相同的标题。我已经做了,但所有标签都有自己的标题代码,即使标题是重复的。我认为应该有一种方法来有效地使用头一次 如何使用一次标题在所有底部选项卡中具有相同的标题?下面是我的伪代码 import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } fro

我正在我的react本机应用程序中使用react navigation v5。应用程序由4个底部选项卡组成,所有选项卡都有相同的标题。我已经做了,但所有标签都有自己的标题代码,即使标题是重复的。我认为应该有一种方法来有效地使用头一次

如何使用一次标题在所有底部选项卡中具有相同的标题?下面是我的伪代码

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

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

function EnjoyStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen}
        options={{     // ========= All 4 bottom tabs have this code(options) ===========
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => <Button onPress={() => alert('This is Home!')} title="Info" color="#fff" />
        }} />
      <Stack.Screen name="Details" component={DetailsScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => <Button onPress={() => alert('This is Details!')} title="Info" color="#fff" />
        }} />
    </Stack.Navigator>
  );
}

function NearMeStack() {  /* same with EnjoyStack*/ }
function ScanStack() {    /* same with EnjoyStack*/ }
function ProfileStack() { /* same with EnjoyStack*/ }

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="EnjoyStack"
        tabBarOptions={{
          activeTintColor: '#ffa',
        }}>
        <Tab.Screen name="EnjoyStack" component={EnjoyStack}
          options={{
            tabBarLabel: 'enjoy',
            tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />)
          }} />
        <Tab.Screen name="NearMeStack" component={NearMeStack}
          options={{
            tabBarLabel: 'Near me',
            tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />)
          }} />
        <Tab.Screen name="ScanStack" component={ScanStack}
          options={{
            tabBarLabel: 'scan',
            tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />)
          }} />
        <Tab.Screen name="ProfileStack" component={ProfileStack}
          options={{
            tabBarLabel: 'Profile',
            tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />)
          }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
export default App;
从'@react-navigation/native'导入{NavigationContainer};
从'@react navigation/stack'导入{createStackNavigator};
从“@react navigation/bottom tabs”导入{createBottomTabNavigator};
const Stack=createStackNavigator();
const Tab=createBottomTabNavigator();
函数EnjoyStack(){
返回(
,
headerRight:()=>alert('This is Home!')}title=“Info”color=“#fff”/
}} />
,
headerRight:()=>alert('This is Details!')}title=“Info”color=“#fff”/
}} />
);
}
函数NearMeStack(){/*与EnjoyStack*/}
函数ScanStack(){/*与EnjoyStack*/}
函数ProfileStack(){/*与EnjoyStack*/}
函数App(){
返回(
()
}} />
()
}} />
()
}} />
()
}} />
);
}
导出默认应用程序;