Responsive Grid in React india & Flex

Question

ich die einfachste zwei Stützenraster Listview

item | item 
item | item 

ich diesen Beitrag sah über das Erstellen um das Raster erstellen möchten, und das funktionierte - ListView grid in React Native

I couldn‘ Verstehst du, wie du mein Netz ansprechen kannst? Wie kann ich die Größe des Artikels auf 50% einstellen?

Ich weiß, es ist eine neue Sprache, aber ich wünschte, es könnte detailliertere Anleitungen/Dokumente haben.

Answer 1

versuchen, den gleichen flex Wert auf beiden Einstellungen vorgenommen hat, so dass sie gleich

Answer 2

wachsen würden Es ist sehr einfach, Flex-Box, in Ihrer Methode Rückkehr Ansicht Render enthält Zeilen und zum Anlegen Daten für Schleife verwenden.

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, 
    } 
}); 

Ich habe diesen Code nicht ausgeführt, aber hoffe, es funktioniert für Sie !!!

Answer 3

Sie können dies leicht erreichen, indem Sie react-native-easy-grid Bibliothek verwenden.

Da es sich um ein 2X2-Layout handelt, können Sie es wie folgt verwenden. Ersteinfuhr 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 dies:

Explaination: Ich habe ein 2X2 Layout der lauten die Reaktionen unter Verwendung von native-easy-grid-Bibliothek mit den Komponenten Grid, Row, Col. Die Schönheit ist, dass Sie keine flexDirection Attribute erwähnen müssen, es funktioniert einfach. Dann übergab ich diese Komponente an die renderRow-Prop von ListView-Element.

Answer 4

Ich musste nur tun, und ich könnte es mit einfachen reagieren Ansichten und die flexWrap Regel lösen.

Elternteil Ansicht

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

Kinderblick (Artikel)

{ width: '50%' } 

Hoffnung, dass dies jemand helfen könnte!