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

属性确认的作用

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

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

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

主要原因是随着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';

例子

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

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,

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

(0)

相关推荐

  • React-Native中props具体使用详解

    props就是属性,是为了描述一个组件的特征而存在的.它是父组件传递给子组件的. 使用props 通过上一个页面传递 新建一个 PropsTest.js 文件 exprot default class PropsTestextendesComponent{ render(){ return <Text>{this.props.name}</Text> } } 在上一个页面中使用PropsTest组件 import PropsTest from './PropsTest' <P

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

    属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

  • React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • React Native中NavigatorIOS组件的简单使用详解

    一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android

  • React Native Modal 的封装与使用实例详解

    目录 背景 Android FullScreenModal 的封装使用 Android 原生实现全屏 Dialog 封装给 RN 进行相关的调用 Android 原生部分实现 JS 部分实现 使用 RootSiblings 封装 Modal 实现界面 Render 相关 实现 Modal 展示动画相关 使用 View 封装 Modal 整体 Modal 控件的封装 其他 Android Back 键的注意 View 封装 Modal 时候的注意 最后 背景 在使用 React Native(以下

  • 关于vue组件事件属性穿透详解

    组件事件属性穿透 属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 // 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> &l

  • JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf() 先讲解hasOwnProperty()方法和使用.在讲解isPropertyOf()方法和使用 看懂这些至少要懂原型链 一.Object.prototype.hasOwnProperty() 概述 hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性 语法 obj.hasOwnPropert

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • react电商商品列表的实现流程详解

    目录 整体页面效果 项目技术点 拦截器的配置 主页面 添加商品 分页与搜索 修改商品 删除商品 完整代码 整体页面效果 项目技术点 antd组件库,@ant-design/icons antd的图标库 axios 接口请求,拦截器配置 node-sass sass-loader css样式的一个嵌套 react-router-dom react路由使用 react-redux redux hooks:大多数我们用的是函数组件,函数组件没有state属性,所以我们使用hooks来初始化数据,并且函

  • React DOM diff 对比Vue DOM diff 区别详解

    目录 React DOM diff 和 Vue DOM diff 的区别 React DOM diff 代码查看流程 总结 React DOM diff 和 Vue DOM diff 的区别 React 是从左向右遍历对比,Vue 是双端交叉对比. React 需要维护三个变量(我看源码发现是五个变量),Vue 则需要维护四个变量. Vue 整体效率比 React 更高,举例说明:假设有 N 个子节点,我们只是把最后子节点移到第一个,那么 React 需要进行借助 Map 进行 key 搜索找到

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

随机推荐