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