RN九宫格
2024-10-10 19:16:13
九宫格可以用两种方式来做,一种使用SectionList,是我的另外一篇博客,还有一种的纯代码计算,下面是效果图
代码如下:
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get("window");//屏幕的宽和高
var itemWidth = 100;//item宽度
var itemHeight = 100;//item高度
var cols = 3;//列数
var marginLeft = (width-itemWidth*cols)*1.0/(cols+1);//左侧距离 export default class MyApp extends Component { static defaultProps = {
count: 5
}
getAllText(){
var texts = [];
for(var i=0;i<5;i++){
texts.push(
<View key={i} style={styles.textStyle}>
<Text >123</Text>
</View> )
}
return texts;
} render() {
return (
<View style={styles.wrapper}>
{this. getAllText()}
</View>
)
} } const styles = StyleSheet.create({
wrapper: {
flexDirection:'row',
// 换行显示
flexWrap:'wrap',
paddingTop: 40
},
textStyle: {
width: itemWidth,
height: itemHeight,
backgroundColor: "#ff0000",
alignItems: 'center',
justifyContent: 'center',
marginLeft: marginLeft,
marginTop: 5
}
});
最新文章
- SQLite3源程序分析之查询处理及优化
- Fisher vector for image classification
- 小心一些,断言可能让你的造成循环引用NSAssert
- 解决mvc部署在IIS上以后出现404错误
- Html-Css-div半透明
- PgSQL &#183; 追根究底 &#183; WAL日志空间的意外增长
- 安装MySQldb出错解决方法
- Robotium自动化测试报告生成
- 一个java文件编译之后会产生多个class文件
- clipboard让复制的文本换行
- SDL2来源分析7:演出(SDL_RenderPresent())
- XCode使用技巧
- UNIX网络编程——UDP回射服务器程序(初级版本)以及漏洞分析
- 给opencart产品页添加额外信息
- 如何自动生成图片用于测试 pytorch(No image? No need image)
- html 转义处理
- 《Practical Vim》第五章:命令行模式
- 为什么Firefox在SSH上这么慢?
- [No0000100]正则表达式匹配解析过程分析(正则表达式匹配原理)&regexbuddy使用&正则优化
- VMWare常用快捷键
热门文章
- Generate class from database table How can i generate a class from a table at a SQL Server?
- MTK WIFI底部加入返回按钮
- 解决Win10 Virtualbox5.2.18桥接不能联网小记
- 【netcore入门】在Windows IIS上部署.NET Core 2.1项目
- 解决 kubenetes无法创建pod No API token found for service account ";default";
- nuxt项目中vue报错The client-side rendered virtual ...
- Centos 解决SSH 免密码登录 以及Crontab制作定时SSH自动登录和关闭的脚本
- spring的自生一个bug
- Zabbix监控MySQL免密码设置
- Windows的文件类型关联