React Native底部选项卡添加垂直填充

uqdfh47h  于 2023-03-31  发布在  React
关注(0)|答案(1)|浏览(111)

如何在底部选项卡中添加垂直填充?
目前我的底部标签看起来像这样。

我想做这样的事情,它有一些不错的垂直间距。

但是,如果我添加这个paddingVertical:

底部选项卡现在看起来像这样。

nkhmeac6

nkhmeac61#

所以首先需要创建Tab.Screen
如果你需要在图片和标签之间留一些空间,你需要在里面给予样式。我会给你看我的代码
这是我的底部导航的样子

<Tab.Screen
    name={screenName}
    component={componentName}
    options={{
        tabBarItemStyle: { styles.tabBarStyle },
        headerShown: false,
        tabBarLabelStyle: { bottom: '12%' },
        tabBarIcon: ({ focused }) => (
            <View
                style={[
                    styles.tabBarIcon,
                ]}>
                <Image
                    source={iconPath}
                    resizeMode="contain"
                    style={{
                        width: 20,
                        height: 20,
                        tintColor: focused && isTabFocused
                            ? AppColors.MAIN_COLOR
                            : AppColors.WHITE_COLOR,
                    }}
                />
            </View>
        ),
    }} />

相关问题