Tools

解决React-native一行两个，一行三个，一行N个布局问题

阅读：894 发布：2019-03-15 作者：lypeng

## 上代码：

```
import React, { Component } from 'react';
import { View, ScrollView, Dimensions, StyleSheet } from 'react-native';
export default class FlexDirectionBasics extends Component {
    render() {
        return (
            <ScrollView style={{flex: 1}}>
                <View style={styles.box}>
                    <View style={styles.list} />
                    <View style={styles.list} />
                    <View style={styles.list} />
                    <View style={styles.list} />
                    <View style={styles.list} />
                </View>
            </ScrollView>
        );
    }
};
//获取屏幕宽度
let screenWidth = Dimensions.get("window").width;
//设置左右间隔
let space = 10;
//一行几个数量定义
let numbers = 3;
//list实际宽度计算
let list_width = screenWidth/numbers - space*2;

var styles = StyleSheet.create({
    box: {
        flex: 1, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start'
    },
    list: {
        width: list_width,
        height: list_width,
        backgroundColor: 'skyblue',
        borderColor:'#f00',
        borderWidth:1,
        marginTop: 10,
        marginLeft:space,
        marginRight:space
    },
})
```

## 说明
numbers可以随便定义，一行2,3,4个等等，space间距看个人喜好了~
屏幕宽度除以个数，即单个的宽度（下图中的3），然后减去两边的间隔（space*2）即剩下的宽度
## 实现效果如下图：
![](/uploads/git/2019031502.jpg)

----------

## 再附一个我的分类页面的截图（真实应用，哈哈）：

![](/uploads/git/2019031501.jpg)

## git地址：https://github.com/lypeng29/RN_news?_blank

------本文结束感谢阅读------

上一篇：react-native案例（一）调用豆瓣接口写的图书电影APP

下一篇：react-native实现下拉刷新与上拉加载