React Native控件的props属性和自定义控件

react native 版本号0.55.4

目录：
1.Props定义
2.最简单的自定义控件
3.自定义控件时，Props是可以设置默认值的
4.自定义控件时，可以对属性值的类型做检查
5.属性检查参数的类型
6.做一个空页面自定义控件的封装样例

一、Props定义

Props（属性）是组件在被创建的时候就能够使用的各种参数，通常是该组件被使用时传递过来的或者是该组件已经设置的默认参数。
Props是组件的不可变属性（组件自己不可以自己修改props值的）。组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。一般组件很少需要对外公开方法（例外：工具类的静态方法等），唯一的交互途径就是props。所以说它也是组件间通信的桥梁。组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。

二、最简单的自定义控件

下面用代码展示一下，props的使用以及RN中最简单的自定义控件样例

import {Text, View} from 'react-native'
export default class PropsComponent extends Component {
    render() {
        return <View>
            <DoubleText name='小丽'/>
            <DoubleText name='小王'/>
        </View>;
    }
}
/**
 * 自定义控件DoubleText
 */
class DoubleText extends Component {
    render() {
        return <View>
            <Text>hello! </Text>
            <Text>{this.props.name} </Text>
        </View>
    }
}

执行结果如下：

image.png

<DoubleText name='小王’/>

这行代码里边的name就是DoubleText空间的props属性
Name是属性的名称，’小王’是对name属性的赋值

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

这行代码是对name属性的使用
上面是最简单props的使。rn中自定义控件通常是围绕着props属性开发的。

三、自定义控件时，Props是可以设置默认值的

下面来看一下属性的默认值

import React, {Component} from 'react'
import {Text, View} from 'react-native'
export default class PropsComponent extends Component {
    render() {
        return <View>
            <DoubleText name='小丽'/>
            <DoubleText/>
        </View>;
    }
}
/**
 * 自定义控件
 */
class DoubleText extends Component {
   //给属性设置默认值
    static defaultProps = {
      name:'未命名',
    };
    render() {
        return <View>
            <Text>hello! </Text>
            <Text>{this.props.name} </Text>
        </View>
    }
}

执行结果如下：

image.png

  static defaultProps = {
      name:'未命名',
    };

如果属性使用的时候没有赋值，但是在使用的时候需要设置默认值，就可以使用这种方式。

四、自定义控件时，可以对属性值的类型做检查

对props的传入参数类型需要检查验证的，需要使用PropTypes包，需要导入对应的包

import React, {Component} from 'react'
import {Text, View} from 'react-native'
import PropTypes from 'prop-types'
export default class PropsComponent extends Component {
    render() {
        return <View>
            <DoubleText name='小丽'/>
            <DoubleText name='小王' age={20}/>
        </View>;
    }
}

/**
 * 自定义控件
 */
class DoubleText extends Component {
    static defaultProps = {
        name: '未命名',
        age: 18
    };

    static propTypes = {
        age: PropTypes.number,
        name:PropTypes.string
    };

    render() {
        return <View>
            <Text>hello! </Text>
            <Text>{this.props.name} || {this.props.age}</Text>
        </View>
    }
}

这个里边如果传入的age值是字符串，就会有黄色警告提示类型错误。

image.png

如果执行这个代码

<DoubleText name='小王' age=‘22’/>

由于这个只是做的展示，还是能正常显示的，但是会有警告提示。

warning.png

    static propTypes = {
        age: PropTypes.number,
        name:PropTypes.string
    };

这个是对属性值类型的检查方式，一般在封装控件的时候都会使用属性值检查。

五、属性检查参数的类型

属性确认的语法：要求属性是指定的JavaScript基本类型
属性名称：React.PropTypes.array,
属性名称： React.PropTypes.bool,
属性名称： React.PropTypes.func,
属性名称： React.PropTypes.number,
属性名称： React.PropTypes.object,
属性名称： React.PropTypes.string,

要求属性是可渲染节点
可渲染节点指数字，字符串，数字数组，字符串数组。
属性名称: React.PropTypes.node

要求属性是某个指定类的实例
属性名称： React.PropTypes.instanceOf(numberOfAClass)

要求属性取值为特定的几个值
属性名称：React.PropTypes.oneOf([‘值1’,’值2’])，

属性可以为指定类型中的任意一个
属性名称： React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(NameOfAclass)]),

要求属性为指定类型的数组
属性名称: React.PropTypes.arrayOf(React.PropTypes.number),
要求属性是一个指定构成方式的对象
属性名称: React.PropTypes.shape({color:React.PropTypes.string,fontSize:React.PropTypes.number})

属性可以是任意类型
属性名称：React.PropTypes.any

六、做一个空页面自定义控件的封装样例

空页面：NoDataView.js
效果：

image.png

代码如下：

const PropTypes = require('prop-types');
const React = require('react');
const {
    View,
    StyleSheet,
    Image,
    Text,
    Touchable,
} = require('react-native');
/**
 * 自定义空页面控件
 */
class NoDataView extends [React.Component](http://react.component/) {
    //定义传入的属性
    static propTypes = {
        message: PropTypes.string,
        buttonText: PropTypes.string,
        buttonOnClick: PropTypes.func,
    };

    //属性设置默认值
    static defaultProps = {
        //仅对message做设置默认值，其他属性未设置默认值
        message: '暂无数据'
    };
    render() {
        return (
            <View style={styles.wrapper}>
               {/* 绘制图片*/}
                <Image source={require('./image/nodata.jpg')} style={styles.icon}/>
                {/* 绘制文字*/}
                <Text style={styles.textPage}>{this.props.message}</Text>
                {/* 绘制button，需要传入button的text和点击事件的方法*/}
                {this._renderButton()}
            </View>
        );
    }
    //渲染按钮的逻辑实现
    _renderButton = () => {
        if (!this.props.buttonText || !this.props.buttonOnClick) {
            return null;
        }
        return (
            <Touchable onPress={this.props.buttonOnClick} style={styles.button}>
                <Text style={styles.buttonText}>{this.props.buttonText}</Text>
            </Touchable>
        );
    };
}

//定义控件使用的相关样式
const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: '#FFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    icon: {
        width: 196 / 2,
        height: 116 / 2
    },
    textPage: {
        fontSize: 28,
        color: '#252525',
        marginTop: 20,
    },
    button: {
        marginTop: 20,
        backgroundColor: "#f15353",
        paddingVertical: 20,
        paddingHorizontal: 80,
        borderRadius: 4
    },
    buttonText: {
        color: '#FFFFFF'
    },
});
module.exports = NoDataView;

附件：image/nodata.jpg文件

nodata.jpg