react-native - 如何在 React Native Navigation V5 中始终显示底部标签标签？

Question

return (
      <Tab.Navigator
        barStyle={{backgroundColor: '#F2F2F2'}}
        initialRouteName="Catalog">
        <Tab.Screen
          name="Settings"
          options={{
            tabBarLabel: 'Alterações',
            title: 'Configurações',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="cog" color="#000" size={22} />
            ),
          }}>
          {(props) => (
            <Settings
              {...props}
              params={{
                cpf: params.cpf ? params.cpf : cpf,
              }}
            />
          )}
        </Tab.Screen>

        <Tab.Screen
          name="Catalog"
          options={{
            tabBarVisible: false,
            title: 'Ofertas',
          }}>
          {(props) => (
            <Catalog
              {...props}
              params={{
                pracaId: params.pracaId ? params.pracaId : pracaId,
              }}
            />
          )}
        </Tab.Screen>
           [...]
      </Tab.Navigator>
    );

文档说使用titleDisplayMode但是在哪里？什么时候？我只找到旧版本的解决方案。我需要它到 v5。请问，有人可以帮我吗？

我已经包含了我的代码的一部分，以了解我如何使用 lib

标签： react-nativereact-native-navigation

Answer 1

我创建了这个示例，其中HomeScreen始终隐藏底部选项卡并SettingsStack始终自动显示底部选项卡。关键点基本上是这些代码行，一个只有一个屏幕，另一个有一个 StackNavigator：

<Tab.Screen name="HomeScreen" component={HomeScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStack} />

此示例类似于文档https://reactnavigation.org/docs/hiding-tabbar-in-screens/中的示例，但包含更多组件。

下面的代码在小吃中，检查这是否对您有帮助： https ://snack.expo.io/@ronicesarrc/react-navigation-hiding-showing-bottom-tab-navigator

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

function SettingsInternalScreen() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'orange',
      }}>
      <Text>SettingsInternalScreen!</Text>
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <TouchableOpacity
        style={{ backgroundColor: 'orange', padding: 16 }}
        onPress={() => navigation.navigate('SettingsInternalScreen')}>
        <Text>Go to Screen showing bottom tab</Text>
      </TouchableOpacity>
    </View>
  );
}

const SettingStack = createStackNavigator();

function SettingsStack() {
  return (
    <SettingStack.Navigator>
      <SettingStack.Screen name="SettingsScreen" component={SettingsScreen} />
      <SettingStack.Screen
        name="SettingsInternalScreen"
        component={SettingsInternalScreen}
      />
    </SettingStack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        style={{ backgroundColor: 'gray', padding: 16 }}
        onPress={() => navigation.navigate('HomeInternalScreen')}>
        <Text>Go to Screen hidding bottom tab</Text>
      </TouchableOpacity>
    </View>
  );
}

function HomeInternalScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>HomeInternalScreen!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

const Tabs: React.FC = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeScreen" component={HomeScreen} />
      <Tab.Screen name="SettingsStack" component={SettingsStack} />
    </Tab.Navigator>
  );
};

const MainStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <MainStack.Navigator headerMode="none">
        <MainStack.Screen name={'Tabs'} component={Tabs} />
        <MainStack.Screen
          name={"HomeInternalScreen"}
          component={HomeInternalScreen}
        />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}