ReactNative iOSアプリケーションの2つの列レイアウト

Question

私のReactNativeアプリケーションでは、アイテムのグループに対して2列のレイアウトを実装しようとしています。

コード私が働いている：私は間違って何をやっている

<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を使用することをお勧めしますレイアウトを手動で計算するのではなく、レイアウトを変更する必要があります。ここでは、2列のレイアウトを達成する方法の反応ネイティブの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)) 
}