Question

我总共有6个屏幕，但是我只想在屏幕下方的底部标签导航中放置4个屏幕（教程，文件上传，详细信息搜索和配置文件）。我使用“ tabBarLabel：（）=> null”隐藏用于登录和注册屏幕的标签。我的底部标签现在有4个标签，但是只有标签消失了，仍然占据了那个位置。

enter image description here

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


const FileUploadStack = ({route, navigation}) => (
  <Stack.Navigator screenOptions={{
          headerStyle: {
          backgroundColor: '#009387',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
          fontWeight: 'bold'
          }
  }}>
  <Stack.Screen name="File Upload" component={FileUpload} initialParams={{ itemId: 42 }} options={{
                title:''}} />
  </Stack.Navigator>
);

const DetailsSearchStack = ({navigation}) => (
  <Stack.Navigator screenOptions={{
          headerStyle: {
          backgroundColor: '#009387',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
          fontWeight: 'bold'
          }
  }}>
  <Stack.Screen name="Details Search" component={DetailsSearch}  options={{
                title:''}} />
  </Stack.Navigator>
);

const LoginStack = ({navigation}) => (
  <Stack.Navigator screenOptions={{
          headerStyle: {
          backgroundColor: '#009387',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
          fontWeight: 'bold'
          }
      }}>
  <Stack.Screen name="Login" component={Login} options={{
                title:''}} />
  </Stack.Navigator>
);

const RegisterStack = ({navigation}) => (
  <Stack.Navigator screenOptions={{
          headerStyle: {
          backgroundColor: '#009387',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
          fontWeight: 'bold'
          }
      }}>
  <Stack.Screen name="Register" component={Register} options={{
                title:'' }} />
  </Stack.Navigator>
);

const TutorialStack = ({navigation}) => (
<ThemeContextProvider>
  <Stack.Navigator screenOptions={{
          headerStyle: {
          backgroundColor: '#009387',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
          fontWeight: 'bold'
          }
      }}>
  <Stack.Screen name="Tutorial" component={Tutorial} options={{
                title:'' }} />
  </Stack.Navigator>
</ThemeContextProvider>
);



export default function App() {
  
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");

  return (
      <NavigationContainer>
        <Tabs.Navigator>
          <Tabs.Screen name = "Tutorial" component={Tutorial} options={{ tabBarVisible: false, header: null}}/>
          <Tabs.Screen name= "Login" component={Login} options={{ tabBarVisible: false, tabBarLabel: () => null}}/>
          <Tabs.Screen name= "Register" component={Register} options={{ tabBarVisible: false,tabBarLabel: () => null }}/>
          <Tabs.Screen name= "File Upload" component={FileUpload} />
          <Tabs.Screen name= "Details Search" component={DetailsSearch} />
          <Tabs.Screen name = "Profile" component={User} option={{ tabBarLabel: 'Profile', 
                                                        tabBarIcon: ({ color }) => ( <View>
                                                        <Icon name={"ios-person"} color={color} size={25}/> </View>)}}/>
        </Tabs.Navigator>

      {/* <Stack.Navigator initialRouteName="Tutorial">
        <Stack.Screen name="Tutorial" component={Tutorial} options={{ headerShown: false }}/>
        <Stack.Screen name="Login" component={Login}/>
        <Stack.Screen name="Register" component={Register}/>
        <Stack.Screen name="File Upload" component={FileUpload} />
        <Stack.Screen name="Details Search" component={DetailsSearch}/>
      </Stack.Navigator> */}
      {/* <FlatList
          data={data}
          renderItem={({ item }) => (
            <Text>{item.field1}, {item.field2}</Text>
          )}
        /> */}
      <StatusBar style="auto" />
    </NavigationContainer>
  );
}

Answer 1

您将必须为tabBarButton返回null，如下所示，这将隐藏选项卡中的整个按钮

  <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarButton: () => null,
        }}
      />

react-native在底部标签导航中隐藏屏幕的特定标签

1 个答案: