育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]3分钟搞定React Native自定义组件之props属性

[技术文章]3分钟搞定React Native自定义组件之props属性

时间:2016-09-21 18:15:01  来源:育知同创  作者:育知

  • 对于很多React Native初学者而言,他们首先会去看facebook的官网,但是往往得到的答案是看不懂,或者是看得一头雾水,本篇文章春哥(微信:452649730)就花几分钟时间通过案例给大家分享一下props的用法。

     

    备注:文章中的案例都是基于ES 6的规范而编写

     

    很多人说学习HTML5不需要面向对象的基础,又或者很多人说,春哥,我只会iOS,不知道学习React Native算不算有基础,我的答案是:学习HTML5和React Native,如果学员有面向对象编程思想的话,那么学习起来将会是事半功倍。在我的理解中,一个div、p、span、bold等等的标签都可以看成是一个类,这个类有它自己的相关的属性,代码中所呈现的每一个具体的标签,例如:<div />或者<div></div>都是一个具体的对象,在W3C中,每一个具体的标签都是一个盒子,如下图所示:

     

    QQ图片20160921174928.jpg

     

    而每一个具体的盒子它其实就是一个对象,每一个对象都有自己的相关属性,比如上图中的,width、height、margin-top、margin-right等等。

     

    类比HTML元素与React Native原生组件

    当开发Web应用时,我们使用各种基础的HTML元素,例如<div>、<span>、<img>,还有各种组织元素:<ol>、<ul>、和<table>。在React Native中,我们不再使用这些元素,但使用类似于他们的各种组件,如下图所示:

     

    QQ图片20160921175015.jpg

     

     在前言中我们写到,div、img、span、p这些标签都可以看成一个类,而每一个具体的<div />就是一个对象,在React Native 中,虽然不再使用div,img这些HTML标签,但是React Native中的View、Image、Text每一个类比的标签,我们也是把它们看成一个类,而每一个具体的<View />、<Image />、<Text />都是盒子,而每一个盒子就是一个对象,有自己的属性。对于上图中的View、Image、Text、ListView这些类而言,它们是facebook封装好的类,它们有自己的属性。

     

    如何自定义一个类

     import React, {

        Component ,

        PropTypes

    } from 'react';

    import {

      AppRegistry,

      View,

      Text

    } from 'react-native';

     

     

    class Person extends Component {

          static propTypes = {

              name: PropTypes.string.isRequired,

              age: PropTypes.number.isRequired

          }

     

          static get defaultProps() {

              return {

                  name: "郭宪龙",

                  age: 60

              }

          }

        render(){

            return (

            <View>

                <Text style={{fontSize: 25}}>姓名,{this.props.name}</Text>

                <Text style={{fontSize: 25}}>年龄,{this.props.age}</Text>

            </View>

            )

        }

    }

     

    class MyView extends Component {

      render() {

          return (

              <View style={{

                  flex: 1,

                  backgroundColor: 'green',

                  alignItems: 'center',

                  justifyContent: 'center'

              }}>

                  <Text>www.52learn.wang</Text>

                  <Text>www.52learn.wang</Text>

                  <Person name="黎跃春" age={28}/>

                  <Person />

                  <Person name="郑建文" age={27}/>

              </View>

          )

      }

    }

     

    AppRegistry.registerComponent('YZRNProject', () => MyView);

     

     

    上面的案例运行起来的效果图如下:

     

    QQ图片20160921175113.jpg

     

    案例分析:

     class Person extends Component {

          static propTypes = {

              name: PropTypes.string.isRequired,

              age: PropTypes.number.isRequired

          }

     

          static get defaultProps() {

              return {

                  name: "郭宪龙",

                  age: 60

              }

          }

        render(){

            return (

            <View>

                <Text style={{fontSize: 25}}>姓名,{this.props.name}</Text>

                <Text style={{fontSize: 25}}>年龄,{this.props.age}</Text>

            </View>

            )

        }

     

    }

     

    自定义组件:

    class Person extends Component {

          

        render(){

            return (

            

            )

        }

    }

    属性类型确认:

    static propTypes = {

        name: PropTypes.string.isRequired,

        age: PropTypes.number.isRequired

     

    }

    上面的代码中,要求name的类型必须是字符串类型,age类型必须是number类型,如果给name赋一个number类型的值就会有警告:

    <Person name={100} age={27}/>

     

    如何自定义一个类

     

    QQ图片20160921175140.jpg

     

    属性类型确认小结:

    (1)要求属性是指定的JavaScript基本类型

    属性名称:PropTypes.string.isRequired,

    属性名称:PropTypes.bool.isRequired,

     属性名称:PropTypes.func.isRequired,

     属性名称:PropTypes.string.isRequired,

     属性名称:PropTypes.number.isRequired,

     属性名称:PropTypes.object.isRequired

    (2)要求属性是可渲染节点

    可渲染节点指数字、字符串、数字数组、字符串数组。

    属性名称:PropTypes.node.isRequired

    (3)要求属性是某个React元素

     属性名称:PropTypes.element.isRequired

    (4)要求属性是某个指定类的实例

    属性名称:PropTypes.instanceOf(NameOfAClass)

    (5)要求属性取值为特定的几个值

     属性名称:PropTypes.oneOf([‘值1′,’值2′,’值3’])

    (6)属性可以为指定类型中的任意一个

            属性名称: PropTypes.oneOfType([

            PropTypes.string,

            PropTypes.number,

            PropTypes.instanceOf(NameOfAClass)

            ])

    (7)要求属性为指定类型的数组

    属性名称:PropTypes.arrayOf(React.PropTypes.number)

    (8)要求属性是一个有特定成员变量的对象

    属性名称:PropTypes.objectOf(React.PropTypes.number)

    (9)要求属性是一个指定构成方式的对象

    属性名称:PropTypes.shape({

                    color: React.PropTypes.string,

                    fontSize: React.PropTypes.number

            })

    (10)属性可以是任意类型

    属性名称:React.PropTypes.any

    上面描述的10种语法,都可以通过在后面加上isRequired声明它是必须的。

     

    指定属性默认值

     我们可以在自定义组件中设定属性默认值,这样当组件被渲染时,如果没有指定某个属性的值,则使用默认值。通过在自定义组件中增加如下代码来为属性置顶默认值。

     

    static get defaultProps() {

        return {

            name: "郭宪龙",

            age: 60

        }

    }

     
     
    相关文章

    [技术文章]一步一步搭建RN开发环境





上一篇:Java EE 7新特性告诉你Java EE为何始终不败?

下一篇:[技术文章]如何在Android和iOS平台运行React Native应用


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号