これらの反応成分が重なっているのはなぜですか？

Question

2つの同様のコンポーネントがレンダリングされました。各コンポーネントにはアイコンとテキストがあり、それぞれが重なってはいけません。私のスタイリングに何が問題なの？ここで

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カラムであるべきである：あなたが行であるので

flexDirection: "column" 

、画像及びテキストが互いに横にレンダリングされます。十分なスペースがないので、ラップオーバーしています。したがって、flexDirectionを変更すると、それが修正されるはずです。

編集 - またはあなたのイメージやテキストにフレックスを追加します。

<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> 

ことができますなら、私を知ってみましょう！