一、基本介绍
1,属性确认的作用
使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误。
因此我们可以在开发 React Native自定义组件时,可以通过属性确认来声明这个组件需要哪些属性。这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性。
注意:为了保证 React Native 代码高效运行,属性确认仅在开发环境中有效。也就是说,正式发布的 App运行时是不会进行检查的。
2,prop-types 库的安装和配置
过去我们可以直接使用React.PropTypes进行属性确认,不过这个自 React v15.5起就被移除了。所以现在我们改用 prop-types 库代替。
(1)进入项目根目录,执行如下代码安装prop-types库:
npm install --save prop-types
(2)在需要使用的 js文件中使用如下代码引入:
import PropTypes from 'prop-types';
二、使用样例
1,未使用属性确认
(1)这里我们自定义一个 List组件(list.js)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
export default class List extends Component {
show(title) {
alert(title);
}
render() {
var news = [];
for(var i in this.props.news){
var text = (
onPress={this.show.bind(this, this.props.news[i])}
numberOfLines={1}
style={styles.list_item_font}>
{this.props.news[i]}
);
news.push(text);
}
return (
{news}
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
list_item:{
height:40,
marginLeft:10,
marginRight:10,
borderBottomWidth:1,
borderBottomColor: '#ddd',
justifyContent: 'center'
},
list_item_font:{
fontSize:16
},
});
(2)下面使用这个 List组件,组件的 news属性需要传递一个数组进来,这里我们故意传递个其它类型的数据。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
} from 'react-native';
//导入自定义的列表组件
import List from './list'
class Main extends Component {
render() {
var news = [
'Swift - 滑块(UISlider)的用法',
'Swift - 告警框(UIAlertView)的用法',
'Swift - 选择框(UIPickerView)的用法',
'Swift - 操作表(UIActionSheet)的用法',
'Swift - 滚动视图(UIScrollView)的用法'
];
return (
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
});
AppRegistry.registerComponent('HelloWorld', () => Main);
(3)虽然我们数据类型都错了,但界面上是没有任何提示,只是没有数据显示出来。
2,使用属性确认
(1)下面对 list.js代码做个修改,增加属性确认代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import PropTypes from 'prop-types';
export default class List extends Component {
//........
}
//添加属性确认
List.propTypes = {
news: PropTypes.array,
}
const styles = StyleSheet.create({
//........
});
(2)再此运行程序,会发现手机上弹出相关的警告信息。如果此时运行 React Native Dev Tool,那里面也会有相关的警告信息。
三、属性确认的语法
1,要求属性是指定的 JavaScript 基本类型
属性: PropTypes.array,
属性: PropTypes.bool,
属性: PropTypes.func,
属性: PropTypes.number,
属性: PropTypes.object,
属性: PropTypes.string,
2,要求属性是可渲染节点
属性: PropTypes.node,
3,要求属性是某个 React 元素
属性: PropTypes.element,
4,要求属性是某个指定类的实例
属性: PropTypes.instanceOf(NameOfAClass),
5,要求属性取值为特定的几个值
属性: PropTypes.oneOf(['value1', 'value2']),
6,要求属性可以为指定类型中的任意一个
属性: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.instanceOf(NameOfAClass),
])
7,要求属性为指定类型的数组
属性: PropTypes.arrayOf(PropTypes.number),
8,要求属性是一个有特定成员变量的对象
属性: PropTypes.objectOf(PropTypes.number),
9,要求属性是一个指定构成方式的对象
属性: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number,
}),
10,属性可以是任意类型
属性: PropTypes.any
四、将属性声明为必需的
上面描述的 10种语法,都可以通过在后面加上 isRequired声明它是必需的。
属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,
如果将属性声明为必需的,如果使用时没有给该属性传递数据,手机上会弹出相关的警告信息。