React Native 常见属性的理解

有多处参考来自大神：
http://www.52php.cn/article/p-sdgwdabu-bcx.html

首先了解state和props的差异：

一个组件可以通过两种数据类型进行控制，一种是props，一种是state。
1）props是在父组件中设置，一旦指定，它的生命周期是不可以改变的。
2）对于组件中数据的变化，我们是通过state来控制的。

1、props

props(属性) 概念

大多数组件在创建的时候可以自定义一些参数，这些定制参数就统称为props（属性）。所谓props，就是单向的属性传递。es6中的语法，属性多的时候，可以传递一个对象。

// 自定义组件
class Icon extends Component{
   render(){
     return(
       <Image source={this.props.image} style={{width:193,height:110}}/>
     );
   }
}

export default class firstRN extends Component {
  constructor(props) {
       super(props);
       this.state = {text:''};
    }
  render() {
     // 配置数据
     let pic = {
       uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'
     }
    return (

    // image
    //<Image source={pic} style={{width:193,height:110}} />

    <View style={{padding:20}}>
      <Icon image={pic} />
    </View>

    );
  }
}

上面第一种方式是传统的图片创建方式，第二种是采用自定义的方式，定义了一个image的props属性，在自定义组件内通过this.props.image 获取属性值进行图片地址的设置。

2、state

一般情况下，我们初始化state状态，是在constructor构造函数中，然后如果需要改变时，我们可以调用setState方法,当state发生变化则更新DOM。

经典案例：

class ShowBlink extends Component{
  constructor(props){
    super(props);
    this.state = {showText:true}
    // 设置计时器
    setInterval(()=>{
      this.setState({showText:!this.state.showText});
    },1000);
  }

  render(){
    let showMsg = this.state.showText ? this.props.text:'';
    return(
      <Text>{showMsg}</Text>
    );
  }
}

export default class firstRN extends Component {
   render(){
     return(
        <ShowBlink text="hello world!"/>
     );
   }
｝

这样效果为每秒闪烁一次的效果。

3、style

设置样式的方式大致分为两种，一种是在组件内部进行样式的设置，一种通过StyleSheet.create创建集合，集中进行样式的设置（推荐）。
第一种方式：

<View> <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View> <View style={{width:100,height:100,backgroundColor:'skyblue'}}></View> <View style={{width:150,height:150,backgroundColor:'steelblue'}}></View> </View>

第二种方式：

<View>
   <View style={styles.wid5}></View>
   <View style={styles.wid10}></View>
   <View style={styles.wid15}></View>
</View>

const styles = StyleSheet.create({
  wid5:{
    width:50,height:50,backgroundColor:'powderblue'
  },wid10:{
    width:100,height:100,backgroundColor:'skyblue'
  },wid15:{
    width:150,height:150,backgroundColor:'steelblue'
  }
});