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
usegetCurrentActivity
to get the activity reference. This change is backward compatible. - Apps need to be migrated to use the latest template
Migration instructions for apps
- Create a new file
MainApplication.java
in the same folder asMainActivity.java
- 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 - Update
MainActivity.java
to match - https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainActivity.java - Add
android:name=".MainApplication"
in the<application />
section ofAndroidManifest.xml
. It should now look like,
<application + android:name=".MainApplication" android:allowBackup="true" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:theme="@style/AppTheme">
- Clean gradle cache -
./gradlew clean
- Plugins which pass activity reference in the constructor need to be updated to extend
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");
}
}