React Native之属性类型检查机制详解 PropType 变成 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 库：


1

npm install --save prop-types

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


1

import PropTypes from ‘prop-types‘

例子

例如，我们写一个导航栏的例子，效果如下：


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

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

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,

React-Native中props具体使用详解

props就是属性，是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。

使用props

通过上一个页面传递

新建一个 PropsTest.js 文件


1

2

3

4

5

exprot default class PropsTestextendesComponent{

  render(){

    return <Text>{this.props.name}</Text>

  }

}

在上一个页面中使用PropsTest组件


1

2

3

4

5

import PropsTest from ‘./PropsTest‘

<PropsTest

  name = ‘XiaoMing‘

/>

注意: 上方代码，均为代码片段。

默认属性，以及它的作用

由于props的属性都是上个页面传递的，所以无法修改它。但是我们可以在PropsTest文件中，给props定义一些默认的值。


1

2

3

4

5

6

7

8

exprot default class PropsTestextends Component{

  static defaultProps={

    name: ‘XiaoHong‘

  }

  render(){

    return <Text>{this.props.name}</Text>

  }

}

注意，defaultProps 需要使用static关键字来做静态修饰。这样，如果上个页面没有传值，则显示的是这个默认的属性。

对props进行约束和检查


1

2

3

4

5

6

7

8

9

10

11

12

13

exprot default class PropsTestextends Component{

  static defaultProps={

    name: ‘XiaoHong‘

  }

  static propTypes={

    name: PropTypes.string,

    age: PropTypes.number,

    sex: PropTypes.string.isRequired

  }

  render(){

    return <Text>{this.props.name}</Text>

  }

}

对props里面的属性进行类型判断，可以使用propTypes来做到，同样需要使用static关键字来修饰。

isRequired 可以指定必填项

注意:

propTypes属性 在 react 包中，需要先导入才能使用。

props延伸操作符

ES6的最新语法

假如我们的组件需要好多属性，如下：


1

2

3

4

5

6

7

8

9

params = {name: ‘XiaoZhang‘, age: 18, sex: ‘男‘}

// 如果需要传递给下一个页面需要：

<PropsTest

  name = {params.name}

  sex = {params.sex}

  age = {params.age}

/>

// 等等，这样如果属性特别多，代码将会变得难以维护。

在ES6中可以使用最新的延伸操作符特性


1

2

3

<PropsTest

  {...params}

/>

非常的简洁

props解构赋值

ES6的最新语法

通过延伸操作符传递的对象，在另一个组件中想要从中获取某几个来使用，可以用解构赋值的方式


1

2

3

4

5

6

7

8

9

var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处，同样是不需要使用如下的传统方式

{params.name}或{params.age}

以上就是本文的全部内容，希望对大家的学习有所帮助

原文地址：https://www.cnblogs.com/lguow/p/9194055.html

时间： 2024-08-01 04:26:04

React Native之属性类型检查机制详解 PropType 变成 prop-types的相关文章

【React Native开发】React Native控件之WebView组件详解以及实例使用(22)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同

TypeScript——类型检查机制

类型检查机制:TypeScript编译器在做类型检查时,所秉承的一些原则,以及表现出的一些行为. 作用:辅助开发,提高开发效率. 类型推断 :指不需要指定变量的类型(函数的返回值类型),TypeScript可以根据某些规则自行的推断出一个类型 1.基础类型推断2.最佳通用类型推断3.上下文类型推断 - 前两者都是从右往左的推断,根据值去推断, 例如 let a = 1 // a 被推断的类型是 number let a = 1 - 最佳通用类型推断 例如 let b = [1, 'a'] //

Hibernate延迟加载机制详解

摘自 http://blog.chinaunix.net/uid-20577907-id-3129234.html 1 延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作. 在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另外在Hibernate3中还提供了对属性的延迟加载.下面我们就分别介绍这些种类的延迟加载的细节. A.实体对象的延迟加载: 如果想对实体对象使用延迟加载,必须要在实体的映射配置文

Android总结篇——Intent机制详解及示例总结

     最近在进行android开发过程中,在将 Intent传递给调用的组件并完成组件的调用时遇到点困难,并且之前对Intent的学习也是一知半解,最近特意为此拿出一些时间,对Intent部分进行了系统的学习并进行了部分实践,下面将自己的学习及Intent知识进行了详细的归纳整理,希望能帮助到同样遇到相同问题的博友.下面是Intent介绍.详解及Intent示例总结: 一.Intent介绍: Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与

Android触摸屏事件派发机制详解与源码分析二(ViewGroup篇)

1 背景 还记得前一篇<Android触摸屏事件派发机制详解与源码分析一(View篇)>中关于透过源码继续进阶实例验证模块中存在的点击Button却触发了LinearLayout的事件疑惑吗?当时说了,在那一篇咱们只讨论View的触摸事件派发机制,这个疑惑留在了这一篇解释,也就是ViewGroup的事件派发机制. PS:阅读本篇前建议先查看前一篇<Android触摸屏事件派发机制详解与源码分析一(View篇)>,这一篇承接上一篇. 关于View与ViewGroup的区别在前一篇的A

浏览器缓存机制详解

对于浏览器缓存,相信很多开发者对它真的是又爱又恨.一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了"错误"的东西,而在开发过程中千方百计地想把缓存禁掉.那么浏览器缓存究竟是个什么样的神奇玩意呢? 什么是浏览器缓存: 简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中.缓存会根据进来的请求保存输出内容的副本.当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是

SpringMVC视图机制详解[附带源码分析]

目录 前言 重要接口和类介绍 源码分析 编码自定义的ViewResolver 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:http://www.cnblogs.com/fangjian0423/p/springMVC-introduction.html 本文将分析SpringMVC的视图这部分内容,让读者了解SpringMVC视图的设计原理. 重要接口和类介绍 1. View接口 视图基础接口,它的各种实现类是无

Android ViewGroup触摸屏事件派发机制详解与源码分析

PS一句:最终还是选择CSDN来整理发表这几年的知识点,该文章平行迁移到CSDN.因为CSDN也支持MarkDown语法了,牛逼啊! [工匠若水 http://blog.csdn.net/yanbober] 该篇承接上一篇<Android View触摸屏事件派发机制详解与源码分析>,阅读本篇之前建议先阅读. 1 背景 还记得前一篇<Android View触摸屏事件派发机制详解与源码分析>中关于透过源码继续进阶实例验证模块中存在的点击Button却触发了LinearLayout的事

Java反射机制详解

Java反射机制详解 Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为Java语言的反射机制. 1.关于Class 1.Class是一个类,一个描述类的类(也就是描述类本身),封装了描述方法的Method,描述字段的Filed,描述构造器的Constructor等属性    2.对象照镜子后(反射)可以得到的信息:某个类的数据成员名.方法和构造器.某个类到底实现