(1)單一組件的生命周期再學(xué)習(xí)

• **一 ( 組件初始化 )： **
• (1) getDefaultProps：獲取初始的配置參數(shù)（獲取默認(rèn)的props）
• (2) getIniticalState：初始化組件狀態(tài)（初始化state）（在組件掛載之前會調(diào)用一次）
• (3) componentWillMount：組件即將被渲染和裝載
• (4) render：組件渲染
• (5) componentDidMount：組件裝載完畢
• 二 ( 組件運(yùn)行中 )：state狀態(tài)改變會觸發(fā)（6）
• (6) shouldComponentUpdate：是否需要更新組件（一般從性能考慮，用該方法控制：狀態(tài)變化的弧度，數(shù)量等。從而來判斷是否馬上更新，還是積累到一定的量在更新，注意：在shouldComponentUpdate方法中不要用setState方法來修改狀態(tài)）
• (7) componentWillUpdate：組件即將要更新
• (8) render：渲染
• (9) componentDidUpdate：組件已經(jīng)完成更新
• 外部props改變：
• (10) componentWillReceiveProps：組件即將接受傳值
• 三 ( 卸載組件 )：
• (11) onMount

• (12) componentWillOnmount：組件即將被卸載

  
  
  react-native生命周期

(2)聲明組件的兩種方式

react native聲明組件的兩種方式,其中componentWillMount和construtor的作用是一樣，都是渲染頁面之前做一些業(yè)務(wù)邏輯。

• (1) var ShopIndex = React.createClass( { } )

var ShopIndex = React.createClass({
  render() {
    return (
      <View style={styles.container}>
          <ViewPagerUI/>
          <GoodsTab/>
      </View>
    );
  }
});

• (2) class ShopIndex extends Component{ }

class ShopIndex extends Component{
  constructor(props) {
    super(props);
    this.props.navComponent.setNavItems({
      rightItem: {
        component: (
          <TouchableOpacity style={[styles.navItem, {marginRight: 7}]}>
            <Image style={{width: 20, height: 20}} source={{uri: shareImg}}/>
          </TouchableOpacity>
        ),
        event: function() {
          this.props.navigator.push({
            title: '購物車',
            component: <Cart/>
          });
        }.bind(this)
      }
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <ViewPagerUI/>
        <GoodsTab/>
      </View>
    );
  }
}

(3)通過修改state中的狀態(tài)項(xiàng)，然后用三目運(yùn)算符，去控制styles,source等任何的屬性的選擇。

例子：
<Image 
style={styles.sLogo} 
source={ this.state.up ? require('../../love.png') : require('../../loveup.png') }
>
</Image>

(4) React-Navigation導(dǎo)航器

• (1) 安裝

npm install react-navigation -save

• (2) 為了方便Android、iOS統(tǒng)一管理，在根目錄下新建app目錄，將所有js文件，寫在這個文件夾中。