8. 遇到不可抗力的自然灾害

如下图，不解释

自然灾害

遂怒改用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升级的，跨度比较大，遇到的问题也很多，在此记录以免掉坑。

1. 首先一个大的改动在29版本，分离了启动程序，从以前的MainActivity.java变成现在的MainActivity.java和MainApplication.java，猜测目的是将主启动程序与启动视图分离，将抽象类接口化，更好的解耦（我没分析过源码，只限个人猜测），官方说明在这里，我是一个搬运工，大致翻译如下

• 将MainActivity.java和MainApplication.java修改如连接所示样式，MainActivity，MainApplication如果你已经运行react-native upgrade则无需改动
• 添加name属性，在AndroidManifest.xml文件中添加如下

<application
    android:name=".MainApplication" 
...
>

1. 如果出现诸如如下错误：

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。