React Native iOS 应用程序中的两列布局

Posted 2023-03-31

【中文标题】React Native iOS 应用程序中的两列布局

【英文标题】：Two column layout in ReactNative iOS app

【发布时间】：2017-04-20 15:24:32

【问题描述】：

在我的 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>

我做错了什么？

我想要的是：

我得到的是：

【问题讨论】：

删除flexWrap: wrap

不，它不起作用。我刚试过。

那么您可能想更好地解释什么不起作用，它的外观以及它应该是什么样子

【参考方案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);

【参考方案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))