it-swarm.com.de

Freiraum zwischen Komponenten im React Native-Stil

 enter image description here

Ich habe 6 View-Komponenten (im Bild gezeigt), ich möchte Platz zwischen allen 6 View-Komponenten haben. 

Mein Code:

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

Versuchen Sie, dem Element anschließend eine Auffüllung hinzuzufügen und in jeder Zeile eine weitere leere Ansicht. Die Auffüllung muss zwischen den einzelnen Elementen Platz schaffen

 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>

16

Sie können den Elementen einfach Ränder hinzufügen, und es funktioniert einwandfrei .  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>

3
Tarik Fojnica

sie haben in diesem Fall 2 Lösungen

marge/Polsterung beim ersten Gebrauch, um Luft zwischen dem Flex-Element herzustellen

und umgekehrt wird justifyContent auf 'space-between' || gesetzt "Weltraum"

sie müssen jedoch einige Informationen kennen, um in verschiedenen Fällen die beste Lösung zu verwenden

1- (Randauffüllung)

in einigen Fällen (mehr), wird der Rand besser aufgefüllt 

wie Sie jetzt, wenn wir Box (Mittelelement) haben, haben Sie zwei Leerzeichen, 

zuerst zwischen Inhalt und Grenze [Innerer Raum] 

zweitens Raum zwischen Rand und einem anderen Fremdfeldelement [Weltraum]

wenn Sie ein Element haben und das Element in Ihrem Stil verschieben möchten, müssen Sie den Rand verwenden. Wenn Sie für Ihr Element eine Auffüllung verwenden, hat sich der Innenraum geändert, und in vielen Fällen führt dies zu einem Absturz in Ihrem Element {{wenn Sie Sie möchten eine Auffüllung verwenden. Sie müssen eine Ansicht erstellen und all Ihre Elemente umschließen und die Auffüllung für den Wickler festlegen. 

und wenn Sie Leerzeichen verwenden möchten || space-around müssen Sie wissen, dass space-between und space-around einen Unterschied haben 

im Zwischenraum wird der Raum zwischen den Elementen erzeugt und nicht zwischen den Elementen mit Seiten 

und umlaufender Raum mit Elementen und Seiten

0

Sie können in Ihrem Stil Folgendes hinzufügen:

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