Tools
首页
画图
音乐
采集
记事
博客
实验室
登录
lypeng
146
文章
11
分类
46
记事
分类
生活-[23]
Linux-[24]
前端-[9]
数据库-[16]
PHP-[31]
git-[7]
其他-[6]
python-[20]
算法-[4]
React-Native-[4]
中草药-[2]
广告位1
广告位2
首页
/ React-Native
返回列表
解决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 (
); } }; //获取屏幕宽度 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)即剩下的宽度 ## 实现效果如下图:  ---------- ## 再附一个我的分类页面的截图(真实应用,哈哈):  ## git地址:https://github.com/lypeng29/RN_news?_blank
------本文结束
感谢阅读------
上一篇:
react-native案例(一)调用豆瓣接口写的图书电影APP
下一篇:
react-native实现下拉刷新与上拉加载