React-Native 之 GD （五）属性声明和属性确认 及 占位图

1.在 React-Native 创建的自定义组件是可以复用的，而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件，为了让开发人员之间减少沟通成本，我们会对某些必要的属性进行属性声明，让使用的人知道需要传入什么！甚至有些需要传入但没有传入值的属性我们会进行警告处理！

属性声明 的示例：

?

1 2 3 4

static propTypes = {     name:PropTypes.string,     ID:PropTypes.number.isRequired, }

上面我们声明了 name 和 ID 两个属性，并且进行了属性的确认，其中，’isRequired’ 表示如果不传递这个属性，那么开发阶段中，系统会出现警告，让我们对其进行属性确认，也就是说是否为必须属性。

 

2.属性确认语法分为：

（1）属性为任何类型

?

1	React.PropTypes.any

（2）属性是否是 JavaScript 基本类型

?

1 2 3 4 5 6

React.PropTypes.array; React.PropTypes.func; React.PropTypes.bool; React.PropTypes.number; React.PropTypes.object; React.PropTypes.string;

（3）属性是某个 React 元素

?

1	React.PropTypes.element;

（4）属性为几个特定的值

?

1	React.PropTypes.oneOf(['value1', 'value2'])

（5）属性为指定类型中的一个

?

1 2 3 4 5

React.PropTypes.oneOfType([     React.PropTypes.node,     React.PropTypes.number,     React.PropTypes.string ])

（6）属性为可渲染的节点

?

1	React.PropTypes.node;

（7）属性为某个指定类的实例

?

1	React.PropTypes.instanceOf(NameOfClass);

（8）属性为指定类型的数组

?

1	React.PropTypes.arrayOf(React.PropTypes.string)

（9）属性有一个指定的成员对象

?

1	React.PropTypes..objectOf(React.PropTypes.number)

（10）属性是一个指定构成方式的对象

?

1 2 3 4

React.PropTypes.shape({     color:React.PropTypes.stirng,     fontSize:React.PropTypes.number })

（10）属性默认值（当我们没有传递属性的时候使用）

?

1 2 3

static defaultProps = {     name:'张三' };

 

3.占位图

开发中，我们会有许多图片都是从网络进行请求的，但是，如果出现网络卡顿的情况，图片就会迟迟不出现，又或者有的并没有图片，这样图片就为空白状态；为了不让用户感觉太突兀影响用户体验，也为了视图整体性，一般我们会选择使用占位图先展示给用户看，等到图片加载完毕再将图片展示出来。

?

1 2	{/* 左边图片 */} <Image source={{uri:this.props.image === '' ? 'defaullt_thumb_83x83' : this.props.image}} style={styles.imageStyle} />

.