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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
响应式框架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
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python 深入理解yield
2008/09/06 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python实现简单飞行棋
2020/02/06 Python
经贸日语专业个人求职信范文
2013/12/28 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
交通事故和解协议书
2015/01/27 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
北大自主招生自荐信
2015/03/04 职场文书
员工工作表现自我评价
2015/03/06 职场文书
求职推荐信范文
2015/03/27 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers