react-native学习过程-导航

今天趁着空余时间，撸一会儿react，真是看视频的时候简单，看哪儿哪儿懂，自己玩的时候各种报错，下面就来列举我撸代码遇到的一些错误。

项目的运行

开始做的时候就想把项目分的很清楚，每个模块都想单独放在一块，搞了好久，最后放弃了，开始入门的时候，还是以app能够跑起来为主，更多的细节在项目中自然会遇到。

• es5和es6的选择
  在写代码的时候es5和es6混合着用，使用，中间有很多不同的地方药注意，简单举几个例子:

    1. 首先是包的导入;
          es5：
                   var React = require('react');
                   var ReactNative = require('react-native');
  
        es6:
                  import React, { Component } from 'react';
                  import {
                      AppRegistry,
                      StyleSheet,
                      Text,
                      View
                  } from 'react-native';
     2. 组建的创建
  
                es5:通过create的方式创建
                     
                   var Account=React.createClass({
                          ........
                  });
  
                es6:通过继承的方式
  
                      default class gougouDemo extends Component {
                              .......
                    }
  
      3.this上下文的使用
              es5;  外部先获取this,在使用
                        var that=this;
                        that.setState({
                            .......
                      });
            es6:bind(this)会自动帮我们处理
              <Text 
                        style={styles.instructions} 
                        onPress={this._timeReset.bind(this)}>
                          ......
            </Text>
  

其实还有很多很多的不同，笔者认为可以逗使用使用，多熟悉一下呢
有兴趣的同学可以看看es6的新特性

导航栏

导航栏的使用气势很简单，可以直接参考官网的文档
TabBarIos

这里用到啦一个图片资源库react-native-vector-icons

使用方法如下：

npm install(缩写为i) react-native-vector-icons
(@2.0.2) --save

有些图片是二进制文件

需要安装一个模块
npm i rnpm@1.7.0 -g

链接一下文件
rnpm link react-native-vector-icons

安装好之后，打开网址
http://ionicons.com/

选择合适的图片，复制名称 (ion-前缀不用加)

最后附上github地址