(1)单一组件的生命周期再学习

• **一 ( 组件初始化 )： **
• (1) getDefaultProps：获取初始的配置参数（获取默认的props）
• (2) getIniticalState：初始化组件状态（初始化state）（在组件挂载之前会调用一次）
• (3) componentWillMount：组件即将被渲染和装载
• (4) render：组件渲染
• (5) componentDidMount：组件装载完毕
• 二 ( 组件运行中 )：state状态改变会触发（6）
• (6) shouldComponentUpdate：是否需要更新组件（一般从性能考虑，用该方法控制：状态变化的弧度，数量等。从而来判断是否马上更新，还是积累到一定的量在更新，注意：在shouldComponentUpdate方法中不要用setState方法来修改状态）
• (7) componentWillUpdate：组件即将要更新
• (8) render：渲染
• (9) componentDidUpdate：组件已经完成更新
• 外部props改变：
• (10) componentWillReceiveProps：组件即将接受传值
• 三 ( 卸载组件 )：
• (11) onMount

• (12) componentWillOnmount：组件即将被卸载

  
  react-native生命周期

---

(2)声明组件的两种方式

react native声明组件的两种方式,其中componentWillMount和construtor的作用是一样，都是渲染页面之前做一些业务逻辑。

• (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中的状态项，然后用三目运算符，去控制styles,source等任何的属性的选择。

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

---

(4) React-Navigation导航器

• (1) 安装

npm install react-navigation -save

• (2) 为了方便Android、iOS统一管理，在根目录下新建app目录，将所有js文件，写在这个文件夹中。