返回 导航

React / React Native

hangge.com

React Native - 使用prop-types进行属性确认（必要属性验证、类型验证）

作者：hangge | 2017-08-23 08:10

一、基本介绍

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 = (
       <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
  },
});

（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);

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

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

全部评论（1）

回到顶部