Responsive grid in Reagieren Nativen & Flex

Ich bin erstellen wollen, die einfachsten zwei Spalte ListView-grid

item | item
item | item

Sah ich diesen Beitrag über das erstellen der raster und das funktionierte -
ListView-grid-in Reagieren Nativen

Ich konnte nicht verstehen, wie man meine grid-responsive?
Wie kann ich die Größe des Elements auf 50%?

Ich weiß, es ist eine neue Sprache, aber ich wünschte, es könnten ein paar mehr detaillierte Leitfäden /Dokumente.

  • Ich habe gerade laufen in der gleichen Ausgabe, haben Sie jemals finden eine Antwort auf diese?
InformationsquelleAutor Gal Weiss | 2015-05-30
  1. 21

    Ich hatte gerade zu tun, und ich könnte es lösen mit einfachen reagieren Aussicht und die flexWrap Regel.

    Übergeordneten Ansicht

    { flex: 1, flexDirection: 'row', flexWrap: 'wrap'}

    Kind Anzeigen (Elemente)

    { width: '50%' }

    Hoffen, dass dies könnte jemand helfen!

    • Dies sollte die akzeptierte Antwort.
    • die Einstellung des Kindes, die Breite auf einen festen Prozentsatz dazu beigetragen, lösen mein Problem zu bekommen, die Gegenstände zu ergreifen gleichmäßig den Raum, danke!
    • In der Untergeordneten Ansicht sollte es { flexBasis: '50%' } nicht obligatorisch, aber empfohlen
    InformationsquelleAutor ius
  2. 5

    Zu diesem Zweck können Sie leicht mit reagieren-native-easy-grid Bibliothek.

    Da es ein 2X2-layout, können Sie es auf folgende Weise. Zunächst importieren Sie die Bibliothek

    import {Grid,Row,Col} from 'react-native-easy-grid'

    Code:

     export default class StackOverflow extends Component {
constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
        dataSource: ds.cloneWithRows(["item"])
    };
}

render() {
    return (
        <View style={{ flex: 1, padding: 50 }}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={rowData => (
                    <Grid>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "yellow" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "green" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "skyblue" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "orange" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                    </Grid>
                )}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    alignItems: "center",
    justifyContent: "center"
}
});

    Das Ergebnis wäre dieses :
    Responsive grid in Reagieren Nativen & Flex

    Erklärung:
    Ich erstellt ein 2X2-layout verwenden reagieren-native-easy-grid-Bibliothek, die mit den Komponenten der Grid, Row, Col. Der Schönheit ist, dass Sie brauchen noch nicht einmal zu erwähnen flexDirection Attribute, es funktioniert einfach. Dann legte ich diese Komponente, um die renderRow Stütze der ListView-element.

    • das ist großartig,aber Sie erhalten die gleichen Daten in beiden Spalten,was kann ich tun, um weiter meine Daten in meinem zweiten Spalte erste Zeile,bitte helfen Sie!.
    • Nur zwicken die Daten Quell-array nach Ihren Daten, und ändern Sie die gewünschten col mit dem index des array z.B. : <Col>{rowData[1] }</Col>
    • stackoverflow.com/questions/44386595/... bitte beantworten Sie meine Frage auf diesem link
    InformationsquelleAutor BK7
  3. 3

    Es ist sehr einfach, mit flex-box, In der Sie Ihre render-Methode return-Ansicht enthält Zeilen, und verwenden Sie die for-Schleife für Daten.

    const rowData=[];

render() {
    return <View style={styles.container}>{rowData}</View>;
}

for (let objectData of newArray) {
    rowData.push(this.renderRowView(objectData));
}

renderRowView(objectData) {
    return(
        <View style={styles.mainContainer}>
            <View style={styles.leftView}></View>
            <View style={styles.rightView}></View>
       </View>
   );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex:1,
    },
    leftView: {
        flex:1,
    },
    rightView: {
        flex:1,
    }
});

    Habe ich nicht diesen code ausführen, aber hoffe, dass es für Sie funktioniert!!!

    • Harish Pathak,entnehmen Sie bitte meine Frage auf den link unten-------------stackoverflow.com/questions/44386595/... -------iam sicher, Sie können diese Antwort
    InformationsquelleAutor Harish Pathak
  4. 2

    versuchen Sie, die gleiche flex-Wert auf Gegenstände, damit Sie wachsen würde, ebenso

    InformationsquelleAutor boredgames
Schreibe einen Kommentar