Reagieren nativen flexbox - how zu tun Prozentsätze || Spalten || responsive || grid etc

Nach der Arbeit mit react native auf iOS für die letzten paar Wochen, scheine ich über einige Unzulänglichkeiten der flex styling... vor Allem, wenn es um "responsive" Verhalten.

Zum Beispiel, können sagen, Sie möchten eine Ansicht erstellen, enthält Karten (die Metadaten für diese Karten kommt von einer API). Sie möchten die Karten werden 50% der view Breite abzüglich der margin & padding und wickeln nach jedem 2.

Reagieren nativen flexbox - how zu tun Prozentsätze || Spalten || responsive || grid etc

Den aktuellen Umsetzung habe ich für diese Ansicht teilt das zurückgegebene array in Zeilen, die mit 2 items. Die Liste der container hat flex: 1, flexDirection: 'column, die Zeilen haben flex: 1 und dann jede Karte hat flex: 1. Das Endergebnis ist jede Zeile hat 2 Spalten, die gleichmäßig dauern, bis die Hälfte der view Breite.

Wie es scheint, gibt es keinen einfachen Weg, dies zu tun Reagieren Native Stile, ohne Verwendung von javascript zu tun, irgendeine Art von pre-processing auf die Daten, so dass es aus dem Stil richtig. Hat jemand irgendwelche Vorschläge?

  • Haben Sie versucht, die "flexWrap" ?
  • Ja, aber flexWrap funktioniert nur, wenn es zu einem überlauf von Kindern, die nur ausgelöst werden, wenn es eine width-Eigenschaft angegeben wird, auf die Kinder. @niceass
  • Und was stimmt nicht mit der Angabe von 50% Breite? Nicht, dass das, was Sie sowieso wollen?
  • Es gibt kein Konzept von % in Reagieren nativen @niceass
  • War an dieser Frage interessiert, und für das Leben von mir nicht bekommen konnte diese Arbeit mit flexbox allein. Für uns, wir haben um die Abmessungen, die zum berechnen der Fensterbreite und kann dann leicht zu verwenden, 50% Breite, etc. Ich habe eine Zusammenfassung mit einem Beispiel arbeiten, was Sie wollen, aber zugegeben, es ist viel Ausführlicher, als ich es gern haben würde! gist.github.com/dabit3/72138f22120f835dfb92 . Dies ist, wie es aussieht: i.imgur.com/z5HD3GR.png
  • Interessant. Ich dachte, dies könnte das sein, was es wieder zu sich kam. Wir denken an die Schaffung eines flexbox-grid-Komponente, die ähnlich wie die Lösung, wenn es wirklich keine reinen Stile Lösung.
  • Hier ist auf RNPlay (die wurde nicht den gesamten Tag, also Es kann oder kann nicht geladen ) rnplay.org/apps/5vqO7g

InformationsquelleAutor Alek Hurst | 2016-01-22
  1. 9

    Reagieren Nativen bereits hat Prozentsatz-Unterstützung: 

    <View style={[style.parent]}>
    <View style={[style.child, {backgroundColor: '#996666'} ]} />
    <View style={[style.child, {backgroundColor: '#339966'} ]} />
    <View style={[style.child, {backgroundColor: '#996633'} ]} />
    <View style={[style.child, {backgroundColor: '#669933'} ]} />
</View>

var style = StyleSheet.create({
    parent: {
        width: '100%', 
        flexDirection: 'row', 
        flexWrap: 'wrap'
    },
    child: {
        width: '48%', 
        margin: '1%', 
        aspectRatio: 1,
    }
})

    Reagieren nativen flexbox - how zu tun Prozentsätze || Spalten || responsive || grid etc

    • problem mit der Höhe. die Höhe kann nicht gesenkt werden
    InformationsquelleAutor Cherniv
  2. 20

    Kann es einen besseren Weg, dies zu erreichen mit flexbox, aber ich in der Regel definieren "Prozentsatz" Helfer vw und vh für die viewport-Breite und die viewport-Höhe, benannt nach dem CSS viewport-Größe Maßeinheiten:

    import {Dimensions} from 'react-native';

function vw(percentageWidth) {
  return Dimensions.get('window').width * (percentageWidth / 100);
}

function vh(percentageHeight) {
  return Dimensions.get('window').height * (percentageHeight / 100);
}

    Fließen Elemente in einem raster, Sie können dann berechnen Sie eine angemessene Größe für Gegenstände, die Buchhaltung für die Margen-und viewport-Größe:

    const COLUMNS = 3;
const MARGIN = vw(1);
const SPACING = (COLUMNS + 1) / COLUMNS * MARGIN;

const grid = {
  flex: 1,
  flexWrap: 'wrap',
  flexDirection: 'row',
  justifyContent: 'flex-start'
};

const cell = {
  marginLeft: MARGIN,
  marginTop: MARGIN,
  width: vw(100) / COLUMNS - SPACING
}

return (
  <View style={grid}>
    {this.props.things.map(thing => <View style={cell} />)}
  </View>
)

    Sollten Sie nur verwenden Sie dieses Verfahren, wenn Sie haben eine bekannte und begrenzte Anzahl von Elementen für beliebige-Karten verwenden, sollten Sie ListView aus Gründen der performance und teilen Sie Ihre Daten-set, die Zeilen manuell.

    • Dies scheint die beste Lösung zu sein, so weit. Danke für das teilen @jevakallio.
    • Problem bei diesem Ansatz ist, dass es nicht funktionieren wird, wenn Sie zulassen, dass die Ausrichtung geändert werden.
    • korrekt - ich habe gerade veröffentlichte eine Bibliothek, die es einfacher macht, Stil reagieren nativen Komponenten in quer-und hochformat Ausrichtungen: github.com/FormidableLabs/react-native-responsive-styles
    InformationsquelleAutor jevakallio
  3. 1

    Können Sie justifyContent: 'Raum-zwischen'

    <View style={styles.feed}>
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
    <View style={styles.card} />
 </View>

feed: {
 flex: 1,
 flexDirection: 'row',
 flexWrap: 'wrap',
 padding: 16,
 justifyContent: 'space-between'  }


card: {
 backgroundColor: 'white',
 width: '48%',
 aspectRatio: 1,
 marginBottom: 16   }

    screenshot

    InformationsquelleAutor dazraf
Schreibe einen Kommentar