は私がネイティブに反応して画面を設計しようとしていますこんにちはネイティブ

Question

を反応させます。下のスクリーンショットを見ると、ここには3つのビューがあります。テキストがc）サークルビュー

登場しているa）の画像b）中心ビュー私はそれが完全に利用可能なスペースをカバーするよう、中心ビューの幅を広げたいです。私はflexプロパティを使ってやろうとしましたが、できませんでした。誰もそれを行う方法を知っていますか？

<View style={{ flexDirection: "column" }}> 
    <View style={{ flexDirection: "row" }}> 
    <Icon name="user" size={30} /> 
    <Text 
     style={{ 
     textAlignVertical: "center", 
     marginLeft: 20 
     }} 
    > 
     Ajay Saini 
    </Text> 
    </View> 
    <Text style={{ marginLeft: 50 }}>Hello</Text> 
</View> 


<View style={{ flexDirection: "row", width: "100%" }}> 
    <Icon name="user" size={30} /> 
    <View 
    style={{ 
     flex: 1, 
     flexDirection: "column", 
     marginLeft: 20 
    }} 
    > 
    <Text>Williams</Text> 
    <Text> 
     {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds 
     ahajkdhfjksahdf 
    </Text> 
    </View> 
    <View 
    style={{ 
     flex: 1, 
     flexDirection: "row", 
     justifyContent: "flex-end" 
    }} 
    > 
    <TouchableOpacity 
     style={{ 
     borderWidth: 1, 
     borderColor: "rgba(0,0,0,0.2)", 
     alignItems: "center", 
     justifyContent: "center", 
     width: 30, 
     height: 30, 
     backgroundColor: "#fff", 
     borderRadius: 100 
     }} 
    /> 
    </View> 
</View> 

Answer 1

円形ビューにはflex: 1があるため、すべての空き領域を占有しようとします。また、センタービューも同じことを試みます。どのので円形ビューからflex: 1スタイルを取り除く十分でしょう、均等に空き領域を分割することになります。

また、あなたが最も外側のビューにjustifyContent: 'space-between'を追加してみてくださいすることができます。これは、より複雑な設計を簡素化するのに最適なオプションです。

<View style={{ flexDirection: 'row' }}> 
    <Icon name="user" size={30} /> 
    <View 
    style={{ 
     flex: 1, 
     flexDirection: "column", 
     marginLeft: 20 
    }} 
    > 
    <Text>Williams</Text> 
    <Text> 
     {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds 
     ahajkdhfjksahdf 
    </Text> 
    </View> 
    <View 
    style={{ 
     flexDirection: "row", 
     justifyContent: "flex-end" 
    }} 
    > 
    <TouchableOpacity 
     style={{ 
     borderWidth: 1, 
     borderColor: "rgba(0,0,0,0.2)", 
     alignItems: "center", 
     justifyContent: "center", 
     width: 30, 
     height: 30, 
     backgroundColor: "#fff", 
     borderRadius: 100 
     }} 
    /> 
    </View> 
</View> 

Answer 2

flex: 2にこの部分を変更してください。

<View 
    style={{ 
    // flex: 1, 
    flex: 2 
    flexDirection: "column", 
    marginLeft: 20 
    }} 
> 
    <Text>Williams</Text> 
    <Text> 
    {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds 
    ahajkdhfjksahdf 
    </Text> 
</View>