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

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,

(evaluating’_react3.default.PropType.shape’)报错

如果遇到Navigator报上面的错误,请按下面的方法解决。react-native@0.44后navigator被分离了出去,如果想在后面的版本中使用Navigator可以需要安装依赖库:react-native-deprecated-custom-components

import {
  Navigator
} from 'react-native-deprecated-custom-components';

如果还报错,请检查你的react版本,如果是react:16.0.0,请将版本换成。

react": "^16.0.0-alpha.12    

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型 (Browser Object Model)1 Wi

尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

782
来自专栏滕先生的博客

UIGestureRecognizer  手势识别一、概念介绍二、UIView 的分类三、UIGestureRecognizer 抽象类四、UIGestureRecognizerDelegate 代理

4258
来自专栏老司机的简书

CoreText实现图文混排之点击事件

今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了。

1892
来自专栏iOS开发攻城狮的集散地

iOS 瀑布流之栅格布局

1651
来自专栏技术总结

iOS原生Loading效果

4014
来自专栏一个小程序员的成长笔记

HTML5标签学习笔记

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="content-type" cont...

3466
来自专栏一“技”之长

iOS中UITextView方法解读 原

@property(nonatomic,assign) id<UITextViewDelegate> delegate;

984
来自专栏TechBox

UITableViewCell系列之(三)卡片式列表

1631
来自专栏DannyHoo的专栏

iOS中在系统相册中创建自己App的自定义相册

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2361
来自专栏青玉伏案

IOS开发之视图和视图控制器

        视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西。在学习视图这一块的东西的时候,感觉和Java ...

1827

扫码关注云+社区

领取腾讯云代金券