reactjs - View 在被 TouchableOpacity 包裹后部分隐藏

Question

我正在制作一个带有 tabScreen 的 tabNavigator:

<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>
    ),
  })}
/>

和 NewListButton 组件:

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

一切看起来都不错，但是在用 TouchableOpacity 包装 NewListButton 之后

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

NewListButton 组件像这样被部分隐藏

我尝试添加 zIndex 但没有成功。有没有人遇到过同样的问题，希望得到大家的帮助，非常感谢!

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'
    }
});

Answer 1

您是否尝试过将 TouchableOpacity 放入 View 中？

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

或尝试将 {styles.container} 添加到 TouchableOpacity