React Native 底部标签导航器

Question

I have a question, connected with a bottom tab navigator in React Native.

Let assume that I have 6 screens, and I want to show only 5 in a bottom tab navigator.

<Screen
  name='Home'
  component={Home}
  options={{
    tabBarIcon: ({ focused }) => getTabIcon({ focused, source: walletIcon }),
  }}
/>

and like these, 4 other screens too.

I also have another screen, which I don't want to show at Navigator, and it looks like this.

<Screen
  name='EasyCoins'
  component={EasyCoin}
/>

I also have tried to give an option property to my specific screen like this. But this does not work for me.

options={{
  tabBarVisible: false,
}}

I am using

"@react-navigation/bottom-tabs": "^5.11.9",
"@react-navigation/native": "^5.9.4",

Answer 1

Build the screen you don't want to show using the stack-navigator. In this case it will not appear in the tab bar and you can go to that page with any redirect.

You can have a look here -> https://reactnavigation.org/docs/stack-navigator/

Answer 2

React Native: Bottom Tabs Navigator is simple tab bar on the bottom of the screen. Please visit my article for details bottom tabs navigator full code example. You can switch between different screen or routes.

You can have a look here -> https://www.extendfeature.com/react-native-bottom-tabs-navigator/

//Initialized Bottom Tab Navigator
const Tab = createBottomTabNavigator();

<Tab.Navigator initialRouteName="Home"
        screenOptions={{
            tabBarInactiveBackgroundColor: "#011f3b",
            tabBarActiveBackgroundColor: "#032845",
            tabBarInactiveTintColor: "#f8ca12",
            tabBarActiveTintColor: "#ffffff",
            tabBarIconStyle: { marginTop: 4},
            tabBarLabelStyle: { fontSize: 13, color: '#f8ca12', paddingBottom: 3},
            tabBarStyle: {height: 55, position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 4, borderTopWidth: 0},
            style: { borderColor: '#011f3b' },
            headerShown: false,
            unmountOnBlur: true,
        }}
    >
        <Tab.Screen name="Home" component={HomeScreen}
             options={{
               tabBarLabel: 'Home',
               tabBarIcon: ({ color, size }) => (
                 <MaterialIcons name="home" color={color} size={29} style={{ marginTop: 1}} />
               ),
             }}
        />
        <Tab.Screen name="Login" component={LoginScreen}
             options={{
               tabBarLabel: 'Login',
               tabBarIcon: ({ color, size }) => (
                 <MaterialIcons name="login" color={color} size={29} style={{ marginTop: 1}} />
               ),
             }}
        />
        <Tab.Screen name="Register" component={RegisterScreen}
             options={{
               tabBarLabel: 'Register',
               tabBarIcon: ({ color, size }) => (
                 <MaterialIcons name="person-add" color={color} size={29} style={{ marginTop: 1}} />
               ),
             }}
        />
        <Tab.Screen name="About" component={AboutScreen}
             options={{
               tabBarLabel: 'About',
               tabBarIcon: ({ color, size }) => (
                 <MaterialIcons name="menu-book" color={color} size={29} style={{ marginTop: 1}} />
               ),
             }}
        />
        <Tab.Screen name="Profile" component={ProfileScreen}
             options={{
               tabBarLabel: 'Profile',
               tabBarIcon: ({ color, size }) => (
                 <MaterialIcons name="account-circle" color={color} size={29} style={{ marginTop: 1}} />
               ),
             }}
        />
    </Tab.Navigator>