ReactNative iOS應用程序中的兩列布局

Question

在我的ReactNative應用程序中，我試圖爲一組項目實現兩列布局。

的代碼我的工作：

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

我在做什麼錯？

我要的是：

什麼我得到的是：

Answer 1

這不是完全清楚你的成分做的，但一般我會強烈建議使用flexbox爲而不是嘗試手動計算列的樣式。這裏是一個人爲的例子，使用react-native init的方式來實現雙列布局。

/** 
* 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

在項目開發期間，我面臨類似的問題，我找到了解決方案。有時解決方案可能會晚點，但是我只發佈我的解決方案，因爲它可能對其他方面有所幫助，而且此解決方案可能並不完美，但適用於我。

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