美文网首页
react-native学习过程-导航

react-native学习过程-导航

作者: 三季人 | 来源:发表于2017-03-14 16:39 被阅读40次

今天趁着空余时间,撸一会儿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地址

相关文章

网友评论

      本文标题:react-native学习过程-导航

      本文链接:https://www.haomeiwen.com/subject/kqoqnttx.html