ReactNative: 使用View组件创建九宫格
一、简言
初学RN,一切皆新。View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件。View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件的布局排列,默认View组件的布局为纵向布局,一般开发中需要把它转为横向布局使用。现在使用最基本的组件View容器组件,创建一个九宫格。这里会通过给组件设置伸缩性布局完成布局样式。代码如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//导入React和React-Native框架的系统组件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View
} from 'react-native'; //创建应用组件
export default class ReactNativeDemo extends Component {
render() {
return (
<View style={styles.flex}>
<View style={[styles.flex,styles.container]}>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
<View style={styles.item}></View>
</View>
</View>
);
}
} //创建样式表
const styles = StyleSheet.create({
flex: {
flex: 1 // 比例权重为1,会填充整体屏幕
},
container: {
marginTop: 25,
marginBottom: 5,
marginLeft: 5,
marginRight: 5,
backgroundColor: 'red', // 背景色为红色
flexDirection: 'row', // View组件默认为纵向布局,这个改为横向布局
flexWrap: 'wrap', // 宽度不足,可以换行
justifyContent: 'space-between', // 等比例间距排列
borderRadius: 5, // 设置圆角
padding: 5
},
item: {
width: 340/3,
height: 340/3,
backgroundColor: 'green',
borderColor: 'white',
borderWidth: 1,
marginBottom: 5
}
});
//注册应用组件
AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);
二、演示
ReactNative: 使用View组件创建九宫格的更多相关文章
- React-Native基础_4.View组件
View组件 对应ios 的UIView android 中的view 使用要先导入View import { View } from 'react-native'; 使用就是View标签,可以添加S ...
- react-native-pg-style使用方法(以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式.)
react-native-pg-style 以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式. 看大家写的源码中都是按照react-native标准的样式创建方式来写样式代码 ...
- Android Studio开发基础之自定义View组件
一般情况下,不直接使用View和ViewGroup类,而是使用使用其子类.例如要显示一张图片可以用View类的子类ImageView,开发自定义View组件可分为两个主要步骤: 一.创建一个继承自an ...
- React-Native之截图组件view-shot的介绍与使用
React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取 ...
- 界面编程与视图(View)组件
1.视图组件与容器组件 Android应用绝大部分UI组件都放在Android.widget包及其子包.android.view包及其子包中,其所有UI组件都继承了view类,view组件代表一个空白 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- react-native 封装 VedioPlayer 组件
1.封装组件 src/components/VideoPlayer/index.js /** * 视频播放器 组件(VideoPlayer) */ import React, {Component} ...
- 微信小程序把玩(八)view组件
原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-di ...
- [技术博客]React-Native中的组件加载、卸载与setState问题
React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usu ...
随机推荐
- Word文档转为MD
最近整理近年的一些知识笔记,需要将一些之前用word写好的文档转为markdown格式,主要的方法是先将word转换为html格式,再将html转换为markdown格式. Step1. Word t ...
- 使用动态SQL处理table_name作为输入参数的存储过程(MySQL)
关于mysql如何创建和使用存储过程,参考笔记<MySQL存储过程和函数创建>以及官网:https://dev.mysql.com/doc/refman/5.7/en/create-pro ...
- mysql从5.6升级到5.7后出现 Expression #1 of ORDER BY clause is not in SELECT list,this is incompatible with DISTINCT
[问题]mysql从5.6升级到5.7后出现:插入数据和修改数据时出错Caused by: com.ibatis.common.jdbc.exception.NestedSQLException: - ...
- 初级模拟电路:3-11 BJT实现电流源
回到目录 1. 恒流源 (1)简易恒流源 用BJT晶体管可以构造一个简易的恒流源,实现电路如下: 图3-11.01 前面我们在射极放大电路的分压偏置时讲过,分压偏置具有非常好的稳定性,几乎不受晶体管的 ...
- 每天学点HTML01
HTML背景 HTML 又叫超文本标记语言 ,诞生于20世纪90年代初 <html> <head><title>demo1</title> </h ...
- Community structure enhanced cascade prediction 笔记
目录 一.摘要 二.杂记 三.模型思想 四.实验 五.其他 六.参考文献 一.摘要 深度学习不用去手工提取特征,但是现有深度模型没有在传播预测任务中使用社区结构.所以提出一个CS-RNN框架,把社区在 ...
- MySQL数据库解决大数据量存储问题
转载自:https://www.cnblogs.com/ryanzheng/p/8334915.html 提问:如何设计或优化千万级别的大表?此外无其他信息,个人觉得这个话题有点范,就只好简单说下该如 ...
- 深挖计算机基础:趣谈Linux操作系统学习笔记
参考极客时间专栏<趣谈Linux操作系统>学习笔记 核心原理篇:内存管理 趣谈Linux操作系统学习笔记:第二十讲 趣谈Linux操作系统学习笔记:第二十一讲 趣谈Linux操作系统学习笔 ...
- 【转载】algorithm、numeric、functional
reference url:http://www.cplusplus.com/reference/algorithm reference url:https://blog.csdn.net/Swust ...
- PAT 1010 Radix 进制转换+二分法
Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...