如下图,不解释

自然灾害
遂怒改用GitHub API,一系列改动如下:
- 换名字改用RNGitHub(心好累)
- 升级
react-native到最新版本(这世界变化真快) - 新版本
ActivityIndicator兼容Android,遂弃用react-native-spinkit,重写Loading组件
改名#####
之前提到过尽量不要改名,涉及到的改动比较大,会遇到各种不知名错误,趁着本次改动详细记录一下:
- 最靠谱的做法是修改
package.json文件中的name,然后react-native upgrade,根据需要覆盖各种配置文件 - 其中有一个属性不会被修改,需要将
AndroidManifest.xml中的package属性修改成对应的包名比如com.rngithub,包名一般是项目名称小写,这也是为什么不要给项目取诸如RN-GitHub短杠连接字符这样的名字的原因 - 修改
/index.android.js主启动文件主视图名字AppRegistry.registerComponent('RNGitHub', () => App);
顺利的话到此结束,如果已有rnpm link的组件需要重新link,第一次react-native run-android可能出错是因为以前link的组件和新生成的有冲突,重新运行一遍即可,如果报java编译类错误,尝试cd android && ./gradlew clean修复,其他问题未遇到,在此不做说明,自行google。
升级react-native到0.31.0#####
react-native毕竟新生,迭代速度那叫一个快,提醒使用的童鞋对于每一个release都要重视,至少要看一下release note,我是从0.27.2升级的,跨度比较大,遇到的问题也很多,在此记录以免掉坑。
- 首先一个大的改动在
29版本,分离了启动程序,从以前的MainActivity.java变成现在的MainActivity.java和MainApplication.java,猜测目的是将主启动程序与启动视图分离,将抽象类接口化,更好的解耦(我没分析过源码,只限个人猜测),官方说明在这里,我是一个搬运工,大致翻译如下
- 将
MainActivity.java和MainApplication.java修改如连接所示样式,MainActivity,MainApplication如果你已经运行react-native upgrade则无需改动 - 添加
name属性,在AndroidManifest.xml文件中添加如下
<application
android:name=".MainApplication"
...
>
- 如果出现诸如如下错误:
Warning: You are manually calling a React.PropTypes validation function for the fontSize
prop on StyleSheet welcome
. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See[https://facebook.github.io/react/warnings/dont-call-proptypes.html](https://facebook.github.io/react/warnings/dont-call-proptypes.html) for details
需要同时升级react,配套版本是15.2.1,npm --save remove react && npm --save install react@15.2.1
弃用react-native-spinkit并重写Loading#####
并不是说这个组件不好,只是一个简单的loading我觉得没必要使用怎么好的组件而已:
修改app/components/loading.js:
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
ActivityIndicator,
} from 'react-native';
class Loading extends Component {
render() {
return (
<View style={styles.container}>
<ActivityIndicator size='large' color='#30A9DE'/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
export default Loading;
下篇文章将具体修改界面使用GitHub API,目前还没有想好如何设计,敬请期待。(.)
最新代码地址,之前代码已tag,可以查看之前的RELEASE。