PropTypes防止后期代码传参数错误,所以加一个校验,
代码:
import React, {Component,PropTypes} from 'react';
import {View, Text, StyleSheet,TouchableOpacity} from 'react-native'; class CustomView extends Component { static propTypes = {
name:PropTypes.string.isRequired,//姓名 isRequired必填项
like:PropTypes.array,//爱好
age:PropTypes.number,//年龄
adult:PropTypes.bool,//是否成年
sex: PropTypes.oneOf(['man', 'woman']),//性别
eat:PropTypes.func,//吃饭
object:PropTypes.shape({a: PropTypes.string, b: PropTypes.number}),//指定形式
arrayOf: PropTypes.arrayOf(PropTypes.number),//指定类型的数组
oneOfType: PropTypes.oneOfType([//指定其中一种类型
PropTypes.string,
PropTypes.number,
]),
objectOf: PropTypes.objectOf(PropTypes.number),//指定某种对象 } eat(value){
this.props.eat("banana");
}
render() {
return (
<View style={styles.container}>
<Text>name:{this.props.name}</Text>
<Text>like:{this.props.like}</Text>
<Text>age:{this.props.age}</Text>
<Text>adult:{this.props.adult}</Text>
<Text>sex:{this.props.sex}</Text>
<Text>shape:a:{this.props.object.a}b:{this.props.object.b}</Text>
<Text>arrayOf:{this.props.arrayOf}</Text>
<Text>oneOfType:{this.props.oneOfType}</Text>
<Text>objectOf:{this.props.objectOf}</Text>
<TouchableOpacity onPress={()=>this.eat("banana")}>
<Text>eat</Text>
</TouchableOpacity>
</View>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,
alignItems:'center',
justifyContent: 'center'
}, });
使用:
eat(value){
alert(value)
}
render() {
return (
<CustomView
name="lpp"
like={['画画','唱歌']}
age={19}
adult={true}
sex="man"
object={{a:"aa",b:12}}
arrayOf={[1,2,3,4,5,6]}
oneOfType="好人"
objectOf={[5,6,8,9]}
eat={(value)=>this.eat(value)}
/>
);
}
/**
any: createAnyTypeChecker(),
element: createElementTypeChecker(),
instanceOf: createInstanceTypeChecker,
node: createNodeChecker(),
object: createPrimitiveTypeChecker('object'),
symbol: createPrimitiveTypeChecker('symbol'), string: createPrimitiveTypeChecker('string'),
array: createPrimitiveTypeChecker('array'),
number: createPrimitiveTypeChecker('number'),
bool: createPrimitiveTypeChecker('boolean'),
func: createPrimitiveTypeChecker('function'),
shape: createShapeTypeChecker
oneOf: createEnumTypeChecker,
arrayOf: createArrayOfTypeChecker,
objectOf: createObjectOfTypeChecker,
oneOfType: createUnionTypeChecker, */