native数据类型 react_React Native - 使用prop-types进行属性确认（必要属性验证、类型验证）...

一、基本介绍

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,

如果将属性声明为必需的，如果使用时没有给该属性传递数据，手机上会弹出相关的警告信息。