Zweispaltiges Layout in der ReactNative iOS-App

Question

In meiner ReactNative-Anwendung versuche ich ein zweispaltiges Layout für eine Gruppe von Elementen zu implementieren.

Der Code Ich arbeite an:

<Content> 
    <Grid style={{flexWrap: 'wrap', flex: 1}}> 
    {this.state.stories.map(function(story, index){ 
     if (index % 2 === 0) { 
      return <Col key={ index } style={{margin: 5, width: Dimensions.get('window').width/2.2}}> 
        <View> 
         <Image style={{ height: 250, borderRadius: 10}} source={{uri: story.picture_url}} /> 
        </View> 
       </Col> 
     } else{ 
      return <Col key={ index } style={{margin: 5, width: Dimensions.get('window').width/2.2}}> 
       <View style={{marginTop: 25}}> 
        <Image style={{height: 250, borderRadius: 10}} source={{uri: story.picture_url}} /> 
       </View> 
      </Col> 
      } 
     }.bind(this)) 
    } 
    </Grid> 
</Content> 

Was mache ich falsch?

Was ich will, ist:

Was ich bekomme ist:

Answer 1

Es ist nicht klar, was Ihre Komponenten tun, aber im Allgemeinen würde ich empfehlen flexbox Verwendung für Layout statt zu versuchen, Stile für Ihre Spalten manuell zu berechnen. Hier ist ein künstliches Beispiel, das reaktive native Init verwendet, wie Sie ein zweispaltiges Layout erreichen könnten.

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

export default class layout extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.column}> 
      <View style={[styles.box, {backgroundColor:'red'}]}/> 
      <View style={[styles.box, {backgroundColor:'pink'}]}/> 
      <View style={[styles.box, {backgroundColor:'orange'}]}/> 
     </View> 
     <View style={styles.space_between_columns}/> 
     <View style={styles.column}> 
      <View style={[styles.box, {backgroundColor:'blue'}]}/> 
      <View style={[styles.box, {backgroundColor:'green'}]}/> 
      <View style={[styles.box, {backgroundColor:'purple'}]}/> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection:'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    column: { 
    flexDirection:'column', 
    justifyContent:'space-between', 
    alignItems:'center', 
    height:200, 
    width:50 
    }, 
    space_between_columns:{ 
    width:100 
    }, 
    box: { 
    height:50, 
    width:50 
    } 
}); 

AppRegistry.registerComponent('layout',() => layout); 

Answer 2

Während der Projektentwicklung habe ich ein ähnliches Problem, ich habe eine Lösung dafür gefunden. Irgendeine Lösung mag zu spät sein, aber ich poste meine Lösung nur, weil sie anderen helfen kann und diese Lösung mag nicht perfekt sein, aber sie funktioniert für mich.

<Content> 
<Grid style={{flexWrap: 'wrap', flex: 1}}> 
{this.state.stories.map(function(story, index){ 
    if (index % 2 === 0) { 
     return 
    <Row style={{flex:1}}> 
    <Col key={ index } style={{margin: 5, flex:.5}}> 
       <View> 
        <Image style={{ height: 250, borderRadius: 10}} source={{uri: story.picture_url}} /> 
       </View> 
      </Col> 
      {(() => { if (index + 1 < (this.state.subjects.length - 1)) { 
      return <Col key={ index + 1 } style={{margin: 5, flex:.5}}> 
       <View style={{marginTop: 25}}> 
        <Image style={{height: 250, borderRadius: 10}} source={{uri: this.state.stories[index+1].picture_url}} /> 
       </View> 
        </Col> 
     } 
     else 
     { 
      return <Col style={{margin: 5, flex:.5}}/> 
     } 
      })()} 

    } 

    }.bind(this)) 
}