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

ReactNative iOS应用程序中的两列布局

2 个答案: