React Native之prop-types进行属性确认详解


Posted in Javascript onDecember 19, 2017

属性确认的作用

使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误。

因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性。这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性。

React Native已经升级到0.51.0了,版本升级很快,但是对老项目也会有一些问题,常见的就是属性找不到的问题。例如:

React Native之prop-types进行属性确认详解 

主要原因是随着React Native的升级,系统废弃了很多的东西,过去我们可以直接使用 React.PropTypes 来进行属性确认,不过这个自 React v15.5 起就被移除了,转而使用prop-types库来进行替换

属性确认

属性确认的作用

使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误。因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性。

注意:为了保证 React Native 代码高效运行,属性确认仅在开发环境中有效,正式发布的 App 运行时是不会进行检查的。

prop-types 库使用

和其他的第三方库使用类似,prop-types的安装首先进入项目根目录,执行如下代码安装 prop-types 库:

npm install --save prop-types

然后在需要使用PropTypes属性的地方引入:

import PropTypes from 'prop-types';

例子

例如,我们写一个导航栏的例子,效果如下:

React Native之prop-types进行属性确认详解

import React, {
 Component
} from 'react'
import {
 StyleSheet,
 View,
 Animated,
 Image,
 TouchableOpacity,
 TouchableNativeFeedback,
 Platform
} from 'react-native'
import px2dp from '../utils/Utils'
import Icon from 'react-native-vector-icons/Ionicons'
import PropTypes from 'prop-types';

export default class NavBar extends Component{

 static propTypes = {
  title: PropTypes.string,
  leftIcon: PropTypes.string,
  rightIcon: PropTypes.string,
  leftPress: PropTypes.func,
  rightPress: PropTypes.func,
  style: PropTypes.object
 }
 static topbarHeight = (Platform.OS === 'ios' ? 64 : 44)
 renderBtn(pos){
  let render = (obj) => {
  const { name, onPress } = obj
  if(Platform.OS === 'android'){
   return (
   <TouchableNativeFeedback onPress={onPress} style={styles.btn}>
    <Icon name={name} size={px2dp(26)} color="#fff" />
   </TouchableNativeFeedback>
   )
  }else{
   return (
   <TouchableOpacity onPress={onPress} style={styles.btn}>
    <Icon name={name} size={px2dp(26)} color="#fff" />
   </TouchableOpacity>
   )
  }
  }
  if(pos == "left"){
  if(this.props.leftIcon){
   return render({
   name: this.props.leftIcon,
   onPress: this.props.leftPress
   })
  }else{
   // return (<ImageButton style={styles.btn} source={require('../images/ic_back_white.png')}/>)
   return (<View style={styles.btn}/>)
  }
  }else if(pos == "right"){
  if(this.props.rightIcon){
   return render({
   name: this.props.rightIcon,
   onPress: this.props.rightPress
   })
  }else{
   return (<View style={styles.btn}/>)
  }
  }
 }
 render(){
  return(
   <View style={[styles.topbar, this.props.style]}>
    {this.renderBtn("left")}
    <Animated.Text numberOfLines={1} style={[styles.title, this.props.titleStyle]}>{this.props.title}</Animated.Text>
    {this.renderBtn("right")}
   </View>
  )
 }
}
const styles = StyleSheet.create({
 topbar: {
  height: NavBar.topbarHeight,
  backgroundColor: "#06C1AE",
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  paddingTop: (Platform.OS === 'ios') ? 20 : 0,
  paddingHorizontal: px2dp(10)
 },
 btn: {
  width: 22,
  height: 22,
  justifyContent: 'center',
  alignItems: 'center'
 },
 title:{
  color: "#fff",
  fontWeight: "bold",
  fontSize: px2dp(16),
  marginLeft: px2dp(5),
 }
});

语法

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

将属性声明为必须

使用关键字 isRequired 声明它是必需的。

属性: PropTypes.array.isRequired,
属性: PropTypes.any.isRequired,
属性: PropTypes.instanceOf(NameOfAClass).isRequired,

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
响应式框架Bootstrap栅格系统的实例
Dec 19 #Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 #Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 #Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 #Javascript
Vue下的国际化处理方法
Dec 18 #Javascript
webpack多页面开发实践
Dec 18 #Javascript
You might like
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
如何使用php输出时间格式
2013/08/31 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
JS验证码实现代码
2017/09/14 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Python 从attribute到property详解
2020/03/05 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Python编写万花尺图案实例
2021/01/03 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
护理专业自荐书
2014/06/04 职场文书
大学生学习计划书
2014/09/15 职场文书
入伍通知书
2015/04/23 职场文书
导游词之天津盘山
2019/11/01 职场文书