为什么这些React组件重叠？

Question

我渲染了两个相似的组件。每个组件都有一个图标和文本，每个组件都不应重叠。我的造型有什么问题？

    import Icon from "react-native-elements/src/icons/Icon";

<TouchableOpacity onPress={_ => playSound(audio)} style={{
  flexDirection: 'row',
  flexGrow:1,
  flex: 1
}}>
  <View>
    <Icon name="volume-up" color={PRIMARY_BG} size={24}/>
  </View>
  <View>
    <Text style={{
      flexGrow: 1,
      fontSize: 8, 
      backgroundColor: GRAY
   }}>
     [{locale}]{this.props.pronunciation[locale][0]}
    </Text>
  </View>
</TouchableOpacity>

这是输出：

父容器样式

headItemContent: {
    flex: 3,
    flexDirection: 'row',
    justifyContent: 'space-between'
},

Answer 1

我不确定您的图片的位置，但问题是您设置的flexDirection。 touchableOpacity上的flexDirection应为column：

flexDirection: "column"

由于您的行是行，因此图像和文本会彼此相邻。没有足够的空间让它们重叠。所以改变flexDirection，应该修复它。

修改 - 或者为图片和文字添加flex：

<View style={{flex: 1}}>
  <Icon name="volume-up" color={PRIMARY_BG} size={24}/>
</View>
<View style={{flex: 1}}>
  <Text style={{
    flexGrow: 1,
    fontSize: 8, 
    backgroundColor: GRAY
  }}>
   [{locale}]{this.props.pronunciation[locale][0]}
  </Text>
</View>

如果有帮助，请告诉我！