Question

我是新手，可以使用嵌套的堆栈导航器来响应本机并尝试底部导航栏，问题是我的某些内容（下部）出现在底部选项卡的后面，这是默认设置吗？也许这与标签导航器中的堆栈导航器有关，但这应该是一种非常正常的模式...

我想我会在屏幕组件上添加一些额外的bottomPadding，通过将它添加到我所有的屏幕组件上，老实说似乎是一个hack，请看下面的图片以了解我的意思。

我的标签导航器

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default TAB1 = () => {
  return (
    
      <Tab.Navigator style={{ height:50 }}
screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Browse')
            {
              iconName = focused ? 'checkbox-blank-circle' : 'checkbox-blank-circle-outline';
            }
            else if (route.name === 'Find deals')
            {
              iconName = focused ? 'clipboard-alert' : 'clipboard-alert-outline';
            }
            else if (route.name === 'Favorites')
            {
              iconName = focused ?  'checkbox-multiple-blank-circle' : 'checkbox-multiple-blank-circle-outline';
            }
            else if (route.name === 'More')
            {
              iconName = focused ? 'checkbox-multiple-marked-circle' : 'checkbox-multiple-marked-circle-outline' ;
            }

            // You can return any component that you like here!
            return <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>;
          },
        })}
        tabBarOptions={{
          keyboardHidesTabBar: true,
          activeTintColor: 'rgb(30,30,30)',
          inactiveTintColor: 'rgb(68,68,68)',
          //activeBackgroundColor:'',
          //inactiveBackgroundColor:'',
          style : { height:52 },
          tabStyle: { paddingVertical: 2, },
          labelStyle: {
            fontSize: 12,
            margin: 0,
            padding: 0,
          },
        }}

      >
        <Tab.Screen name="Browse" component={PLACEcard1} />
        <Tab.Screen name="Find deals" component={PLACEcard2} />
        <Tab.Screen name="Favorites" component={SCREEN1} />
        <Tab.Screen name="More" component={MODAL3} />
      </Tab.Navigator>
    
  );
}

“我的屏幕”组件给了我这个问题，它本身就是一个堆栈导航器：

const Stack = createStackNavigator();


export default SCREEN1 = ()=> {

    const navigation = useNavigation();
    
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="Home"
                component={MODAL2}
                options={{
                    title: 'CPU Home', 
                }}
            />
            <Stack.Screen
                name="Detail"
                component={SETTINGform1}
                options={{ title: 'CPU Detail' }}
            />
        </Stack.Navigator>
    );
}

我所有的屏幕组件都应该具有flex：1属性，是否有像道具之类的东西可以解决此问题？

底部标签导航器后面的内容与react-native中的嵌套堆栈导航器

0 个答案: