在选项卡导航器中截取的图标图像-本机响应

时间:2018-11-02 15:23:49

标签: react-native react-native-android react-navigation react-native-ios

使用react-navigation-createBottomTabNavigator,我试图将图标往下推一点,但它被切断了,我不确定为什么。

enter image description here

有没有办法解决这个问题?或者,如果您可以指导我有关此的一些信息。

图标样式如下:

<Icon
   name="heart"
   color={tintColor}
   size={28}
   style={{ marginTop: '20' }}
 />

以下是标签栏选项:

 tabBarOptions: {
    showLabel: false,
    activeTintColor: '#e91e63',
    indicatorStyle: {
        height: 100
    },
    style: {
        position: 'absolute',
        backgroundColor: 'transparent',
        height: 50,
        width: DEVICE_WIDTH * 0.94,
        borderTopColor: 'transparent',
        borderBottomLeftRadius: 33,
        borderBottomRightRadius: 33,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        bottom: 0,
        margin: 10,
        shadowColor: '#000000',
        shadowOffset: {
          width: 0,
          height: 0.3
        },
        shadowRadius: 5,
        shadowOpacity: 0.1

    },

    tabStyle: {}
}

非常感谢

2 个答案:

答案 0 :(得分:1)

感谢Samitha,必须设置图标高度:

<Icon
    name="heart"
    color={tintColor}
    size={28}
    style={{ marginTop: 30 , height: 28 }}
 />

答案 1 :(得分:0)

iPhone X的底部保留用于家庭滑动栏

与其他库的分配一样,反应导航实现了新的SafeAreaView或在iPhone X的底部添加了自己的填充,以阻止您将内容放置在该区域中。

如果将按钮设置得太低,按钮不太可能正常工作,因此在这里您无能为力。