02.Props属性

此属性类似于oc中.h文件中的属性,它和state共同来决定UI的绘制

例子:自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在 JSX 语句中，用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架，那就放手做吧！

这里推荐大家一个第三方的库prop-types实现 props属性

1.github地址:

https://github.com/facebook/prop-types

2.基本使用:

import propTypes from 'prop-types';

//从外界传入值,如果不知道类型可以传any类型
static propTypes = {
        height:propTypes.number,
        renderIcon: propTypes.any,
        showText: propTypes.string,
        tag: propTypes.string,
        onClick: propTypes.func  ,
    };

//剩下的在render函数使用属性,style中使用的时候要用数组拼接的形式

3.具体使用方法参见github