web-dev-qa-db-ja.com

Reactネイティブスタイリングのコンポーネント間のスペース

enter image description here

6個のViewコンポーネント（図に表示）があり、6個のViewコンポーネントの間にスペースが必要です。

私のコード：

<View style={{flexDirection:'column',flex:6}}>
            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'red',flex:1}}>
                </View>
                <View style={{backgroundColor:'blue',flex:1}}>
                </View>
            </View>


            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'white',flex:1}}>
                </View>
                <View style={{backgroundColor:'black',flex:1}}>
                </View>

            </View>

            <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}>
                <View style={{backgroundColor:'gray',flex:1}}>
                </View>
                <View style={{backgroundColor:'yellow',flex:1}}>
                </View>

            </View>


 </View>
reactjsgridviewreact-nativeflexbox
11
Behdad

要素にパディングを追加してから、各行に別の空白のビューを追加してみてください。パディングは各アイテム間にスペースを作ります

enter image description here

<View style={{
      flexDirection:'column',
      flex:1,
    }}>
        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'red',flex:2,padding:'10'}}>
            </View>
          <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'blue',flex:2,padding:'10'}}>
            </View>
        </View>

        <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'white',flex:2,padding:'10'}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'black',flex:2,padding:'10'}}>
            </View>
      </View>
      <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:'10'}}>
            <View style={{backgroundColor:'gray',flex:1,padding:'10'}}>
            </View>
            <View style={{flex:0.1}}/>
            <View style={{backgroundColor:'yellow',flex:1,padding:'10'}}>
            </View>
        </View>
19
Maulana Prambadi

要素にマージンを追加するだけで問題なく機能します。 enter image description here

<View style={{flexDirection:'column',flex:6}}>
  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'red',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'blue',flex:1, marginLeft: 5}}>
    </View>
  </View>


  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'white',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'black',flex:1, marginLeft: 5}}>
    </View>
  </View>

  <View style={{flex:2,flexDirection:"row",justifyContent:'space-between', marginBottom: 10}}>
    <View style={{backgroundColor:'gray',flex:1, marginRight: 5}}>
    </View>
    <View style={{backgroundColor:'yellow',flex:1, marginLeft: 5}}>
    </View>
  </View>
</View>
4
Tarik Fojnica

この場合、2つのソリューションがあります

最初に、フレックス要素間の空気を作るためにマージン/パディングを使用します

もう1つの方法は、justifyContentを 'space-between'に設定します|| 「スペースアラウンド」

しかし、別の場合に最適なソリューションを使用するには、いくつかの情報を知っている必要があります

1-（マージンパディング）

いくつかの場合（より多くの場合）、より良いマージンをパディング

ご存知のように、ボックス（elementを意味する）がある場合、2つのスペースがあります。

最初にコンテンツと境界線の間[内部空間]

第二に、境界と別の外部ボックス要素の間のスペース[外側のスペース]

要素があり、スタイル内で要素を移動する場合は、マージンを使用する必要があります。要素にパディングを使用すると、内部スペースが変更され、多くの場合、このアプローチにより要素にクラッシュが発生するためです。{{パディングを使用するには、1つのビューを作成し、すべての要素をラップして、ラッパーのパディングを設定する必要があります}}

スペース間を使用する場合||スペースアラウンド、あなたはこれを知っている必要があります、スペース間とスペースアラウンドは1つの差分を持っています

空間の間に、要素間に生成された空間で、要素と側面の間に空間を作成しません

そして、要素と側面を持つスペースアラウンドセットスペース

0
hamidreza nikoonia

スタイルに以下を追加できます。

attachcontainer{
   flexDirection:  'row',
   justifyContent: 'space-between'
}
0
James Siva