Reactjs 视图被TouchableOpacity包裹后部分隐藏

我正在制作一个具有如下选项卡屏幕的选项卡导航器：

<Tab.Screen
  name="ListingEdit"
  component={ListingEditScreen}
  options={({navigation}) => ({
    tabBarButton: () => (
      <NewListButton
        onPress={() => navigation.navigate('ListingEdit')}></NewListButton>
    ),
    tabBarIcon: ({size, color}) => (
      <MaterialCommunityIcons
        name="plus-circle"
        size={size}
        color={color}></MaterialCommunityIcons>
    ),
  })}
/>

---

您是否尝试将

可触摸不透明度

放入

视图

中

    <View style={styles.container}>
            <TouchableOpacity onPress={onPress}>
                    <MaterialCommunityIcons name="plus-circle" color={colors.white}
                            size={25}></MaterialCommunityIcons>
            </TouchableOpacity>
        </View>

或者尝试将

{style.container}

添加到

TouchableOpacity

<TouchableOpacity onPress={onPress}>
  <View style={styles.container}>
    <MaterialCommunityIcons name="plus-circle" color={colors.white} size={25} />
  </View>
</TouchableOpacity>

My container style:
    const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.primary,
        borderRadius: 35,
        height: 70,
        width: 70,
        bottom: 30,
        borderColor: colors.white,
        borderWidth: 10,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

    <View style={styles.container}>
            <TouchableOpacity onPress={onPress}>
                    <MaterialCommunityIcons name="plus-circle" color={colors.white}
                            size={25}></MaterialCommunityIcons>
            </TouchableOpacity>
        </View>