React Native中定义默认属性值及PropTypes

1、定义默认属性使用defaultProps

static defaultProps={
        name:"小红",
        age:20,
        sex:"男"
    }

2、使用属性约束PropTypes

因为在React 15.5.0 之后的版本中，将PropTypes从React库中废除掉了，因此在React 15.5.0 之后的版本，我们就不要再已这种方式导出PropTypes了

import React, { Component, PropTypes} from 'react'

更换为：

import PropTypes from 'prop-types'

安装prop-types库

npm install prop-types --save

最终代码：

import React, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';
import PropTypes from 'prop-types'


export default class PropsTest extends Component{
    //设置默认属性方法一
    static defaultProps={
        name:"小红",
        age:20,
        sex:"男"
    }
    //类型检测方法一
    /*static propTypes={
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string.isRequired,
    }*/
    render(){
        return (
            <View>
                <Text style={{fontSize:20,backgroundColor:'red'}}>你好: {this.props.name}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>年龄: {this.props.age}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>性别: {this.props.sex}</Text>
            </View>
        );
    }
}
//设置默认属性方法二
/*PropsTest.defaultProps={
    name:"小红",
    age:20,
    sex:"男"
}*/

//类型检测方法二
PropsTest.propTypes={
    name:PropTypes.string,
    age:PropTypes.number,
    sex:PropTypes.string.isRequired,
}

上一个类App传递给PropsTest类的属性操作

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PropsTest from './js/PropsTest'

export default class App extends Component<Props> {
  render() {
      var params={name:'小张',age:18,sex:'男'};
      var {name,sex} = params;//结构赋值的方式传递
      return (
      <View style={styles.container}>
        {/*单独传递属性*/}
        <PropsTest  name={"小红"}
                    sex={"女"} />
        {/*可以使用这种方法一下全部传递*/}
        <PropsTest  {...params} />
        {/*结构赋值的方式传递*/}
        <PropsTest name={name} sex={sex}/>
      </View>
    );
  }
}