Блог

У меня всего 6 экранов, однако я хочу разместить только 4 экрана (учебное пособие, загрузка файлов, поиск сведений и профиль) в нижней вкладке навигации под экраном. Я использую «tabBarLabel: () => null», чтобы скрыть метки для экранов входа и регистрации. На моей нижней вкладке теперь есть 4 метки, но только метка исчезла и по-прежнему занимает это место.

введите описание изображения здесь

 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>
  );
}
  

Вам нужно будет вернуть null для tabBarButton, как показано ниже, это скроет всю кнопку с панели вкладок

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