一、基本介绍

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
 
  • 1

（2）在需要使用的 js 文件中使用如下代码引入：

import PropTypes from 'prop-types';
 
  • 1

二、使用样例

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 = (
       <View key={i} style={styles.list_item}>
         <Text
           onPress={this.show.bind(this, this.props.news[i])}
           numberOfLines={1}
           style={styles.list_item_font}>
           {this.props.news[i]}
         </Text>
       </View>
     );
     news.push(text);
   }
   return (
     <View style={styles.flex}>
       {news}
     </View>
   );
  }
}
 
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
  },
});
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

（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 (
       <View style={styles.flex}>
         <List news={123}></List>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
  flex:{
     flex:1
  },
 });
 
 AppRegistry.registerComponent('HelloWorld', () => Main);
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

（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({
   //........
 });
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

（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,

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