React-Native 之 GD (五)属性声明和属性确认 及 占位图
1.在 React-Native 创建的自定义组件是可以复用的,而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件,为了让开发人员之间减少沟通成本,我们会对某些必要的属性进行属性声明,让使用的人知道需要传入什么!甚至有些需要传入但没有传入值的属性我们会进行警告处理!
属性声明 的示例:
static propTypes = {
name:PropTypes.string,
ID:PropTypes.number.isRequired,
}
上面我们声明了 name 和 ID 两个属性,并且进行了属性的确认,其中,’isRequired’ 表示如果不传递这个属性,那么开发阶段中,系统会出现警告,让我们对其进行属性确认,也就是说是否为必须属性。
2.属性确认语法分为:
(1)属性为任何类型
React.PropTypes.any
(2)属性是否是 JavaScript 基本类型
React.PropTypes.array;
React.PropTypes.func;
React.PropTypes.bool;
React.PropTypes.number;
React.PropTypes.object;
React.PropTypes.string;
(3)属性是某个 React 元素
React.PropTypes.element;
(4)属性为几个特定的值
React.PropTypes.oneOf(['value1', 'value2'])
(5)属性为指定类型中的一个
React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.number,
React.PropTypes.string
])
(6)属性为可渲染的节点
React.PropTypes.node;
(7)属性为某个指定类的实例
React.PropTypes.instanceOf(NameOfClass);
(8)属性为指定类型的数组
React.PropTypes.arrayOf(React.PropTypes.string)
(9)属性有一个指定的成员对象
React.PropTypes..objectOf(React.PropTypes.number)
(10)属性是一个指定构成方式的对象
React.PropTypes.shape({
color:React.PropTypes.stirng,
fontSize:React.PropTypes.number
})
(10)属性默认值(当我们没有传递属性的时候使用)
static defaultProps = {
name:'张三'
};
3.占位图
开发中,我们会有许多图片都是从网络进行请求的,但是,如果出现网络卡顿的情况,图片就会迟迟不出现,又或者有的并没有图片,这样图片就为空白状态;为了不让用户感觉太突兀影响用户体验,也为了视图整体性,一般我们会选择使用占位图先展示给用户看,等到图片加载完毕再将图片展示出来。
{/* 左边图片 */}
<Image source={{uri:this.props.image === '' ? 'defaullt_thumb_83x83' : this.props.image}} style={styles.imageStyle} />
.
React-Native 之 GD (五)属性声明和属性确认 及 占位图的更多相关文章
- React Native探索(五)使用fetch进行网络请求
相关文章 React Native探索系列 前言 React Native可以使用多种方式来请求网络,比如fetch.XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLH ...
- React Native学习(五)—— 使用插件react-native-scrollable-tab-view
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React Native知识12-与原生交互
一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- React Native知识1-FlexBox 布局内容
一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native 弹性布局FlexBox
React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...
- 配置React Native的开发环境
本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a919 ...
- React Native声明属性和属性确认
属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...
随机推荐
- P1540翻译机器
这是2010提高组第一题,是一个使用队列的模拟题(然而洛谷很多大佬用了最短路) 这道题首先要判断内存中是否已有解释(因为题目已经说了长度很小,所以可以用桶排序),没有的话便去外存找,找到后,存到内存的 ...
- [HDU 3712] Fiolki (带边权并查集+启发式合并)
[HDU 3712] Fiolki (带边权并查集+启发式合并) 题面 化学家吉丽想要配置一种神奇的药水来拯救世界. 吉丽有n种不同的液体物质,和n个药瓶(均从1到n编号).初始时,第i个瓶内装着g[ ...
- 使用Log4Net将系统日志信息记录到记事本和数据库中
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hxpjava1/article/details/32714855 一.使用Log4Net将日志记录到 ...
- 【学习总结】快速上手Linux玩转典型应用-第2章-linux简介
课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 什么是Linux 2. Linux能够做什么事情 3. Linux的学习方法 4. 忘掉Windows的所有东西 1. 什么是Linux ...
- js工厂函数创建对象与对象构造函数的理解
工厂函数,顾名思义,就是通过一个"工厂的加工" 来创建一个对象的函数 //工厂函数 function createPerson(name,sex){ sex = sex == '男' ? '女' : ...
- DEV控件的分页控件,实现勾选复选框
/// <summary> /// 单元格的点击事件 /// </summary> /// <param name="sender"></ ...
- CPM、CPC、CPA、PFP、CPS、CPL、CPR等广告术语是什么意思
CPM.CPC.CPA.PFP.CPS.CPL.CPR等广告术语是什么意思 一个网络媒体(网站)会包含有数十个甚至成千上万个页面,网络广告所投放的位置和价格 就牵涉到特定的页面以及浏览人数的多寡.这好 ...
- 牛客练习赛14 D比较月亮大小 (实现)
链接:https://ac.nowcoder.com/acm/contest/82/D来源:牛客网 题目描述 点点是一名出色的狼人.众所周知,狼人只有在满月之夜才会变成狼. 同时,月亮的大小随着时间变 ...
- 一文了解kudu【转载】
原文地址:https://www.jianshu.com/p/83290cd817ac
- bzoj5099 [POI2018]Pionek 双指针
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5099 题解 这道题做法似乎挺单一的. (一开始想了个假做法 向量和的长度等于所有向量在其方向上 ...