ReactNative项目从0.28升级到0.29（Android）

ReactNative项目从0.28升级到0.29 (Android)

备忘纪要：

1.升级react-native到0.29.0版本 

到项目跟目录下，cmd运行命令： react-native-git-upgrade 0.29.0，运行完毕后，应该没有ERROR类型的消息，会有一些提示信息：需要修改等等，表示react-native升级成功。

参考文章：http://blog.csdn.net/jiangbo_phd/article/details/54693335

注意： react-native-git-upgrade 0.29.0命令执行完毕后，会自动把之前的某些第三方的插件删除（node_modules目录下），具体原因未知，从原来的备份的文件中将丢失的模块拷贝到升级后的项目中既可。

2. 升级项目Android主程序文件

2.1 添加MainApplication.java文件，及相关内容

2.2 改造MainActivity.java文件，保留函数getMainComponentName（），将函数getPackages（）及内容移动到文件MainApplication.java中

2.3 在 AndroidManifest.xml中将MainApplication文件设为启动文件

2.4 在项目的android目录下执行./gradlew clean，清理debug文件

具体操作参考如下：

https://github.com/facebook/react-native/releases/tag/v0.29.0

Android

• Change the application template (49f20f4) - @foghina

  • Plugins which pass activity reference in the constructor need to be updated to extend ReactContextBaseJavaModule use getCurrentActivity to get the activity reference. This change is backward compatible.
  • Apps need to be migrated to use the latest template

  Migration instructions for apps

  1. Create a new file MainApplication.java in the same folder as MainActivity.java
  2. Update it to match - https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainApplication.java and move your customisations from MainActivity.java to this file
  3. Update MainActivity.java to match - https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainActivity.java
  4. Add android:name=".MainApplication" in the  section of AndroidManifest.xml. It should now look like,

  +   android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

  1. Clean gradle cache - ./gradlew clean

3. 改造将Activity当做参数传到类中的第三方插件

.29版本之前的很多第三方的插件都是在MainActvity的getPackages函数中，直接将MainActivity自身传给第三方插件的初始化类，但是0.29版本开始不允许直接传入Activity对象，只能通过接口ReactContextBaseJavaModule的函数getCurrentActivity()来获取。

参考文档：

https://github.com/facebook/react-native/issues/8509#issuecomment-229719827

https://github.com/facebook/react-native/commit/49f20f41546e3ba8e7fe43c84c4c701684d0434d

处理方案：以react-native-datetime为例(https://github.com/cnjon/react-native-datetime)

3.1 将第三方插件的类实现接口LifecycleEventListener

public class RCTDateTimePicker extends ReactContextBaseJavaModule implements LifecycleEventListener {

3.2 在构造函数中添加监听接口LifecycleEventListener

public RCTDateTimePicker(ReactApplicationContext reactContext) {
    super(reactContext);
    reactContext.addLifecycleEventListener(this);
}

3.3 在具体需要调用Activity的函数中通过getCurrentActivity()获取Activity

    @ReactMethod
    public void showDatePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment datePicker = new DatePicker(options, callback);
        datePicker.show(activity.getFragmentManager(), "datePicker");
    }

    @ReactMethod
    public void showTimePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment timePicker = new TimePicker(options, callback);
        timePicker.show(activity.getFragmentManager(), "timePicker");
    }

    @ReactMethod
    public void showDateTimePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment datetimePicker = new DateTimePicker(options, callback);
        datetimePicker.show(activity.getFragmentManager(), "datetimePicker");
    }

3.4 override函数onhostresume, onhostpause, onhostdestroy

    @Override
    public void onHostResume() {
    }

    @Override
    public void onHostPause() {
    }

    @Override
    public void onHostDestroy() {
    }

修改后的RCTDateTimePicker.java文件内容如下：

package com.keyee.datetime;

import android.app.Activity;
import android.app.DialogFragment;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.LifecycleEventListener;

public class RCTDateTimePicker extends ReactContextBaseJavaModule implements LifecycleEventListener {

    public RCTDateTimePicker(ReactApplicationContext reactContext) {
        super(reactContext);
        reactContext.addLifecycleEventListener(this);
    }
    @Override
    public void onHostResume() {
    }

    @Override
    public void onHostPause() {
    }

    @Override
    public void onHostDestroy() {
    }

    @Override
    public String getName() {
        return "DateTimePicker";
    }

    @ReactMethod
    public void showDatePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment datePicker = new DatePicker(options, callback);
        datePicker.show(activity.getFragmentManager(), "datePicker");
    }

    @ReactMethod
    public void showTimePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment timePicker = new TimePicker(options, callback);
        timePicker.show(activity.getFragmentManager(), "timePicker");
    }

    @ReactMethod
    public void showDateTimePicker(ReadableMap options, Callback callback) {
        Activity activity = getCurrentActivity();
        DialogFragment datetimePicker = new DateTimePicker(options, callback);
        datetimePicker.show(activity.getFragmentManager(), "datetimePicker");
    }
}