原文地址:http://reactnative.cn/docs/0.31/props.html#content  

1. property:

    如下代码所示

import React, { Component } from ‘react‘;import { AppRegistry, Image } from ‘react-native‘;class Bananas extends Component {  render() {    let pic = {      uri: ‘https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg‘    };    return (      <Image source={pic} style={{width: 193, height: 110}} />    );  }}AppRegistry.registerComponent(‘Bananas‘, () => Bananas);

  上面  <>中间包裹的对象,source={ xxx }  其中source就是图片的属性,代表它的源地址. 类似于HTML中src="http://..."
后面｛｝中间标示的是属性的value(值)。通过后面style={} 属性推测,里面｛｝中间的value因该是存在属性变量或者对象。

{{width: 193, height: 110}} 里面有点类似于一个json数据，也可以理解为一个表达式。 因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

我们自定义组件也可以使用props(property),通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴,只需在render函数中引用this.props，然后按需处理。 举个栗子：
  import React,｛Component ｝from ‘react’；
  import ｛AppRegister，Text，View｝ form ‘react-native‘;
  class Greeting extends Component {
   render() (
     return (<text>hello {this.props.name}!</text>
     ); 
   }
  }

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

AppRegistry.registerComponent(‘LotsOfGreetings‘,()=>

LotsOfGreetings);


2. State：
   如果需要在constuctor中国年初始化state,需要在修改时调用setState方法。
   示例,闪烁文字效果。
   文字内容可以在组件创建时指定,所以对应文字的隐藏和闪烁状态是随着时间变化的。
  import React,{ component } from ‘react‘;
  import {AppRegistry,Text,View} from ‘react-native‘;

class Blink extends Component {  constructor(props) {    super(props);    this.state = { showText: true };    // 每1000毫秒对showText状态做一次取反操作    setInterval(() => {      this.setState({ showText: !this.state.showText });    }, 1000);  }  render() {    // 根据当前showText的值决定是否显示text内容    let display = this.state.showText ? this.props.text : ‘ ‘;    return (      <Text>{display}</Text>    );  }}

class BlinkApp extends Component {  render() {    return (      <View>        <Blink text=‘I love to blink‘ />        <Blink text=‘Yes blinking is so great‘ />        <Blink text=‘Why did they ever take this out of HTML‘ />        <Blink text=‘Look at me look at me look at me‘ />      </View>    );  }}AppRegistry.registerComponent(‘BlinkApp‘, () => BlinkApp);

3. 样式

后设置的样式会比先设置的样式优先级高
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View } from ‘react-native‘;class LotsOfStyles extends Component {  render() {    return (      <View>        <Text style={styles.red}>just red</Text>        <Text style={styles.bigblue}>just bigblue</Text>        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>      </View>    );  }}const styles = StyleSheet.create({  bigblue: {    color: ‘blue‘,    fontWeight: ‘bold‘,    fontSize: 30,  },  red: {    color: ‘red‘,  },});AppRegistry.registerComponent(‘LotsOfStyles‘, () => LotsOfStyles);

常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。

 4. 宽度与高度

    可以将其定义为style属性,在｛｝中写成json格式字符串。 可以通过点语法,定义内连样式。

import React, { Component } from ‘react‘;import { AppRegistry, View } from ‘react-native‘;class FixedDimensionsBasics extends Component {  render() {    return (      <View>        <View style={{width: 50, height: 50, backgroundColor: ‘powderblue‘}} />        <View style={{width: 100, height: 100, backgroundColor: ‘skyblue‘}} />        <View style={{width: 150, height: 150, backgroundColor: ‘steelblue‘}} />      </View>    );  }};// 注册应用(registerComponent)后才能正确渲染// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册AppRegistry.registerComponent(‘AwesomeProject‘, () => FixedDimensionsBasics);

5. 弹性样式 
   flex=1，组件占据整个剩余空间,如果有多个组件,name这些组件平分剩余空间。

import React, { Component } from ‘react‘;import { AppRegistry, View } from ‘react-native‘;class FlexDimensionsBasics extends Component {  render() {    return (      // 试试去掉父View中的`flex: 1`。      // 则父View不再具有尺寸，因此子组件也无法再撑开。      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？      <View style={{flex: 1}}>        <View style={{flex: 1, backgroundColor: ‘powderblue‘}} />        <View style={{flex: 2, backgroundColor: ‘skyblue‘}} />        <View style={{flex: 3, backgroundColor: ‘steelblue‘}} />      </View>    );  }};AppRegistry.registerComponent(‘AwesomeProject‘, () => FlexDimensionsBasics);

6. 使用Flexbox进行布局：

Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

 React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。  <View style={{flex: 1, flexDirection: ‘row‘}}>

    justifyContent可以决定其子元素沿着主轴的排列方式, flex－start,center，flex-end,space-around以及space-bettween.

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

2.ReactNative Properties|States|Styles 笔记