react-native开发安卓app相关使用总结
记录自己平时使用react-native时遇到的问题。其实大部分问题的解决办法都是看github issues解决的
参考:我之前参考过这篇文章,记录的问题还挺全面,也可以参考这个 react-native版本迁移教程
1. 2018.10.7 升级到0.57.2报错
今天升级了一下reaact-native 版本从0.57.0 -> 0.57.2,metro-react-native-babel-preset:0.48.0
运行packager时候有个报错
```javascript
error: bundling failed: Error: Unable to resolve module `./../../../react-transform-hmr/lib/index.js` from `F:\RN\TS\ph_front_android_medical\src\App.tsx`: The module `./../../../react-transform-hmr/lib/index.js` could not be found from `F:\R
N\TS\ph_front_android_medical\src\App.tsx`. Indeed, none of these files exist:* `F:\RN\react-transform-hmr\lib\index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`* `F:\RN\react-transform-hmr\lib\index.js\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`at ModuleResolver.resolveDependency (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:697)at ResolutionRequest.resolveDependency (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)at DependencyGraph.resolveDependency (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\node-haste\DependencyGraph.js:222:485)at Object.resolve (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\lib\transformHelpers.js:149:25)at dependencies.map.result (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\DeltaBundler\traverseDependencies.js:316:29)at Array.map (<anonymous>)at resolveDependencies (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\DeltaBundler\traverseDependencies.js:312:16)at F:\RN\TS\ph_front_android_medical\node_modules\metro\src\DeltaBundler\traverseDependencies.js:169:33at Generator.next (<anonymous>)at step (F:\RN\TS\ph_front_android_medical\node_modules\metro\src\DeltaBundler\traverseDependencies.js:271:307)BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (2/174), failed.
```解决办法:我用 `react-native start --reset-cache`解决了,
但是貌似其他人用这个并不一定能解决,具体参考这个issues的讨论,遇到的人还挺多
bundling failed: Error: Unable to resolve module /../react-transform-hmr/lib/index.js
2.2018.10.11更新 原生方法里面获取不到当前activity
进入rn时调用原生方法后,原生方法里面获取不到当前activity的问题
安卓通过写nativeModule给rn提供了方法
@ReactMethodpublic void init(Promise promise) {Activity currentActivity = getCurrentActivity();Bundle bundle = currentActivity.getIntent().getExtras();SerializableMap serializableMap = (SerializableMap) bundle.get("map");WritableMap map = Arguments.createMap();Iterator<Map.Entry<String, Object>> it = serializableMap.getMap().entrySet().iterator();while (it.hasNext()) {Map.Entry<String, Object> entry = it.next();map.putString(entry.getKey(), entry.getValue() + "");if(entry.getValue() instanceof ArrayList){//如果是arraylist需要单独处理WritableArray writableArray=Arguments.createArray();for (int i=0;i<((ArrayList) entry.getValue()).size();i++) {writableArray.pushString((String) ((ArrayList) entry.getValue()).get(i));}map.putArray(entry.getKey(), writableArray);}}promise.resolve(map);}
上面的代码在某些手机中会报 currentActivity为null,因为我调用这个init方法是在进入rn后js立刻调用这个方法的,在某些情况可能activity还没有onHostResume,导致activity为null,所以这里需要做些额外处理
首先在MainActivity中添加一下代码
public static WeakReference<MainActivity> currentActivity;//添加静态弱引用
...@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);currentActivity = new WeakReference<>(this);}
然后再上面的init方法里添加一行代码
...if(currentActivity==null&& MainActivity.currentActivity!=null){// 防止进入rn调用init方法时activity还没有onHostResumecurrentActivity = MainActivity.currentActivity.get();}...
现在onCreate里面保存当前activity,然后其他地方就可以用了
3.更新2018.10.27 getCurrentActivity===MainActivity?
此时包为0.57.0版本的react-native
最近了解了一下安卓相关知识,在reactModule里面,我们可以用 getCurrentActivity
来获取MainActivity,但是据我了解,getCurrentActivity怎么就获取的是MainActivity呢?也就是我们RN所在的activity呢?我们从MainActivity可以看到它是继承了 ReactActivity的,而ReactActivity的构造方法里面是调用了createReactActivityDelegate() 这个方法会new 一个ReactActivityDelegate 实例,同时传入this,即当前activity,也就是从这个地方传入的
/*** Called at construction time, override if you have a custom delegate implementation.*/protected ReactActivityDelegate createReactActivityDelegate() {return new ReactActivityDelegate(this, getMainComponentName());}
疑问1:
那么还有个疑问就是,为什么在这里传入了这个activity后,我们在自己新建的modules里面获取的就是这里传入的呢?我们通过getCurrentActivity()拿到的是
protected @Nullable final Activity getCurrentActivity() {return mReactApplicationContext.getCurrentActivity();}
也就是我们要找到mReactApplicationContext才能看到activity来自哪里,那再看mReactApplicationContext
public ReactContextBaseJavaModule(ReactApplicationContext reactContext) {mReactApplicationContext = reactContext;}
他是来自我们初始化我们写的package包的时候传入的
public class ReactBridgePackage implements ReactPackage {@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new ReactBridge(reactContext));return modules;}}
也就是这里,在构造函数里面传入了reactContext,那这里的是什么地方传入的呢?继续看
在NativeModuleRegisterBuilder.java中
构造函数中
public NativeModuleRegistryBuilder(ReactApplicationContext reactApplicationContext,ReactInstanceManager reactInstanceManager) {mReactApplicationContext = reactApplicationContext;mReactInstanceManager = reactInstanceManager;}
这里保存了调用时传入的reactContext,
接着这个文件中,有个方法
public void processPackage(ReactPackage reactPackage) {if (reactPackage instanceof LazyReactPackage) {LazyReactPackage lazyReactPackage = (LazyReactPackage) reactPackage;List<ModuleSpec> moduleSpecs = lazyReactPackage.getNativeModules(mReactApplicationContext);Map<String, ReactModuleInfo> reactModuleInfoMap =lazyReactPackage.getReactModuleInfoProvider().getReactModuleInfos();for (ModuleSpec moduleSpec : moduleSpecs) {String className = moduleSpec.getClassName();ReactModuleInfo reactModuleInfo = reactModuleInfoMap.get(className);ModuleHolder moduleHolder;if (reactModuleInfo == null) {NativeModule module;ReactMarker.logMarker(ReactMarkerConstants.CREATE_MODULE_START,moduleSpec.getClassName());try {module = moduleSpec.getProvider().get();} finally {ReactMarker.logMarker(ReactMarkerConstants.CREATE_MODULE_END);}moduleHolder = new ModuleHolder(module);} else {moduleHolder = new ModuleHolder(reactModuleInfo, moduleSpec.getProvider());}String name = moduleHolder.getName();putModuleTypeAndHolderToModuleMaps(className, name, moduleHolder);}} else {FLog.d(ReactConstants.TAG,reactPackage.getClass().getSimpleName()+ " is not a LazyReactPackage, falling back to old version.");List<NativeModule> nativeModules;if (reactPackage instanceof ReactInstancePackage) {ReactInstancePackage reactInstancePackage = (ReactInstancePackage) reactPackage;nativeModules =reactInstancePackage.createNativeModules(mReactApplicationContext, mReactInstanceManager);} else {nativeModules = reactPackage.createNativeModules(mReactApplicationContext);}for (NativeModule nativeModule : nativeModules) {addNativeModule(nativeModule);}}}
有个代码 nativeModules = reactPackage.createNativeModules(mReactApplicationContext);
这里终于有点熟悉了,我们在平时给rn添加模块时都会写一个XXXpackage.java,里面有个方法
@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new ReactBridge(reactContext));return modules;}
看到了吧,我们平时在自己写的模块里面用的reactContext来自上面 reactPackage.createNativeModules(mReactApplicationContext);
传入的,这个代码是在NativeModuleRegisterBuilder.java中的,这个类保存了它被调用时传入的context,那它在哪里被调用的呢?
答案是在ReactInstanceManager.java中,
这个会传入reactContext,它来自于同一个ReactInstanceManager.java文件中的
是new出来的,他new出来后被方法返回了,这个方法再这里有调用
从名字可以看出,是在线程中创建reactContext的,里面会执行
此刻真正的reactContext被创建了,它会传入这个方法setupReactContext
此刻这个ReactInstanceManager的这个mCurrentReactContext终于有值了,并且他是
private @Nullable volatile ReactContext mCurrentReactContext;
ReactContext类型,那我们记得我们上面提到的疑问1的地方,那里的mCurrentReactContext 就是这里的,他俩一样,那何时给他绑定activity呢
看这里还是那个ReactInstanceManager.java文件
我们可以看到onHostResume中传入了一个activity,之后复制给mCurrentActivity,这个mCurrentActivity会在getCurrentActivity中返回出去,
这个方法定义在ReactContext中,而ReactApplicationContext 继承自ReactContext,所以ReactApplicationContext 的实例mCurrentReactContext就有了这个方法,那关键就在onHostResume在什么地方调用的时候传入了当前activity呢
答案是在ReactActivityDelegate.java中
protected void onResume() {if (getReactNativeHost().hasInstance()) {getReactNativeHost().getReactInstanceManager().onHostResume(getPlainActivity(),(DefaultHardwareBackBtnHandler) getPlainActivity());}if (mPermissionsCallback != null) {mPermissionsCallback.invoke();mPermissionsCallback = null;}}
我们看到这里传入了getPlainActivity(),这个方法
private Activity getPlainActivity() {return ((Activity) getContext());}
这个返回的是当前context绑定的activity,我们知道ReactActivity是把自己交给了ReactActivityDelegate.java这个代理类,所以在这个代理类中得到的activity就是你那个继承ReactActivity的类,比如MainActivity,到了这里终于找到了。
总结一下:
大致流程是reactactivity代理类在onHostResume中调用getReactInstanceManager().onHostResume方法传入activity,而后被赋值为ReactInstanceManager类实例的私有变量mCurrentActivity.
由于我不是安卓开发,所以以上理解如有不对请提示
4. 2018.10.28 解决createSwitchNavigator 无法使用转场动画问题
开发时用到了createSwitchNavigator 但是这个导航器不支持过渡动画,因为它可以实现认证流程,也就是登录后按返回没法返回登录页面,但是没动画就很难受,社区很多人在提这个需求,具体可以看这里 switchnavigator-animate-between-screens
很多人要求加这个功能,我感觉他们实现起来不难啊,为什么到了现在还在计划中,但是以后应该会有这个功能吧,目前没有,这个文章回复里面也有几个解决方案,我试了这个https://www.npmjs.com/package/react-navigation-switch-transitioner
但是我运行的时候有报错,提了issues,我最终放弃了,但是我想到了一个解决方法
比如我们在Login.tsx页面
componentDidMount(){this. didBlurSubscription = this.props.navigation.addListener('didBlur',payload => {console.log('Login blur')const resetActions=StackActions.reset({index:0,actions:[NavigationActions.navigate({routeName:"Register"})]})this.props.navigation.dispatch(resetActions)});}componentWillUnmount(){console.log('Login unmount')this.didBlurSubscription.remove();}
上面的代码中我们在页面失去焦点的时候reset当前路由state,使得只剩下一个Register页面,这样按返回键时就直接退出了。
我们还要创建createStackNavigator因为只有它支持动画啊
顺便贴下修改react-navigation页面转场动画的代码
import {createStackNavigator, StackViewTransitionConfigs} from 'react-navigation';
const LoginStack=createStackNavigator({Main:{screen:LoginHome},Register:{screen:Register}
},{initialRouteName:"Main",transitionConfig:()=>StackViewTransitionConfigs.SlideFromRightIOS,navigationOptions:{header:null}})
这样就改成了从右向左进入的方式。
5.2018.10.29更新,使用react-native-splash-screen解决安卓RN白屏
用react-native开发安卓会有白屏问题,其实是有两个白屏阶段,第一个是安卓自己启动白屏,第二个是RN代码初始化时的白屏问题,RN白屏我们可以用react-native-splash-screen这个插件解决,一般大部分人觉得是不是彻底没有白屏了?其实不是,还有安卓自己启动的白屏也要解决下面说下办法:
1.
首先我们在安卓res文件夹的values或者其他values-vXX,在里面找到styles.xml,没有的话新建一个,内容如下
<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"></style><!--这里我们定义一个主题样式,叫startTheme然后设置windowBackground属性--><style name="startTheme" parent="AppTheme"><item name="android:windowBackground">@mipmap/launch_screen</item></style></resources>
在这之前我们要在res里面添加mipmap文件夹或者drawable文件夹类似这样
这样上面的样式就能引用这个图片了,也就是开屏页的图片,
然后我们在我们的AndroidManifest.xml中找到我们RN所在的MainActivity在上面添加刚才的样式
此时如果运行APP,你点击后应该毫秒级别出现你刚才添加的图片,接着安卓启动完后会启动RN的渲染,RN在我们组件渲染完成前借助
react-native-splash-scree 会展示一个图片,一般建议这个图片跟我们样式的图片一致,这样用户感觉不到是两个过程。
接下来还有东西要处理,我们要理解一下那个
<style name="startTheme" parent="AppTheme"><item name="android:windowBackground">@mipmap/launch_screen</item></style>
我设置它后,它在我的整个MainActivity都设置了个背景图,以至于我的RN界面默认是这个背景图,所以我们要设置RN界面默认背景白色
这样MainActivity背景色就改成白色了,而不是刚才那个背景图了
OK,问题完美解决
6.2018.11.3更新,使用webstrom调试react-native
平时用谷歌浏览器调试代码的时候,输入 debugger 这种调试方法有时候在谷歌浏览器看到的断点位置跟实际断点位置不是很一致,所以最近又重新研究了下使用webstrom直接打红点断点来调试。
1: 首先建议使用android studio在手动安装debug App,也就是下图箭头所指的位置,使用这个安装,报错了比直接用命令行运行好排查问题,有时候用react-native run-android总是报错,但是用as运行就没问题,很奇怪的问题
2:等app安装成功后,接下来要配置webstrom
在webstrom工具栏顶部找到这个东西,一般在右上角
点击Edit Configurations
打开后点击+好找到ReactNative
点击OK
出现这个界面
3.然后我再建议加个这个配置
点击 ... 出现下面的弹窗
进行图中的操作
这个是让谷歌浏览器静默运行 不弹出那个debug 的浏览器窗口的
- 最后运行那个小虫子
会出现这个界面,同时你在命令行运行 yarn start 跑起来packger服务
最后你还要打开rn的debug菜单
打开debug JS
然后你就可以在编辑器打红色断点了
7: 2018.11.24 android studio 打包报错 Multiple dex files define Lorg/devio/rn/splashscreen/BuildConfig
这个错尼玛找了很多方法没解决,之前也有一个 Multiple dex 的错,那个错是包重复引入的问题,但是这个查看引用BuildConfig的只有一个包引入了,并没有重复,后来开始瞎加配置起来了,突然加了这个配置就可以打包了
在app 下build.gradle中andriod 配置项添加这个就打包成功了
dexOptions {preDexLibraries = false}
参考文章:Android工程方法数超过65535的解决办法
关闭preDexRelease提速gradle编译
8:2018.12.16 解决某些安卓手机使用StatusBar设置沉浸式失效的问题
在我自己的小米6手机上偶然发现一个bug,就是我第一次打开app后,不杀掉进程,按返回键退出,当我再次打开app后我设置的沉浸式状态栏失效了,具体表现看下图:
第一次打开时的正常样式:
可以看到内容是沉浸到状态栏下面了
当我按物理返回按钮退出后再次点击app启动后是这样子:
尼玛,沉浸式没了!
研究了一下午最后才想到是不是我在代码里面设置状态栏沉浸式没有生效?
最后看了看那react-native的StatusBarModule.java中的代码发现有个判断activity是否存在的判断
后来测试发现确实是第二次打开就会走activity==null的判断,然后直接return不再设置状态栏的样式了,
可是为什么activity是null呢?
我们通过研究react-native的源码可以知道rn会在mainActivity走到onResume生命周期时才给getCurrentActivity返回的activity设置值为MainActivity,也就是MainActivity完全可见时,那我们RN的代码初始化是从onCreate就开始了,会不会是RN的代码执行太快了,等执行到我们在js代码调用StatusBarModule的时候mainActivity此时并没有执行onResume里面的代码呢?应该是有可能的,所以在渲染react-native组件的时候我们这样写的组件
<View style={{flex:1}}><StatusBar translucent={true} backgroundColor="rgba(0,0,0,0)" barStyle={store.statusBarColor}/><RouterView ref={this.setNavigator} /></View>
它渲染的时候我们rnModule里面还无法获取到activity,那我们只能加个延时了,等onResume执行后再重新设置状态栏
我们在app组件的componentDidMount中加个延时
setTimeout(()=>{StatusBar.setTranslucent(true);StatusBar.setBackgroundColor("rgba(0,0,0,0)")},10)
这样就解决这个问题了,但是有个隐患,到底加多少的延时呢?万一有些手机很卡唉,目前还不知道这个问题如何处理,暂且加个10ms吧
react-native开发安卓app相关使用总结相关推荐
- react native开发Android 篇——APP名称、图标、启动页
react native开发Android 篇--APP名称.图标.启动页 设置APP名称 设置APP图标 设置启动页 隐藏启动页 设置APP名称 编辑 android/app/src/main/re ...
- 在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
- React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述 本节课将从React的特点.如何使用React.JSX语 ...
- React Native开发错误警告处理总结(已解决 !持续更新)
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
- 如何用 React Native 开发实时音视频应用
对于 Web.iOS.Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助.仅用 JavaScript 就可以创建运行于移动端的应用.同时,你也可以将 React N ...
- windows 下配置 react native 开发环境
windows 下配置 react native 开发环境 安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
- iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- python能开发安卓app吗_如何Python写一个安卓APP
前言:用Python写安卓APP肯定不是最好的选择,但是肯定是一个很偷懒的选择,而且实在不想学习Java,再者,就编程而言已经会的就Python与Golang(注:Python,Golang水平都一般 ...
最新文章
- 快速原型工具 原型可视化
- Python-读取文件:API介绍
- Http协议(2)—客户端的识别与cookie机制
- 写在08年“愚人节”
- x = x+1,x+=1,x++那个的执行效率高
- Overview of the New C++:C++0x
- 神奇的python(二)之python打包成应用程序
- android post、get请求数据
- 解决python最新版无法安装TensorFlow,导入TensorFlow
- 【学堂在线数据挖掘:理论方法笔记】第五天(3.29)
- 190530每日一句
- Macfee 迈克菲尔CPU占用高解决办法,Macfee配置,优化和暂时关闭保护方法
- win10安装python27_《win10python27安装教程》 win10怎么安装python
- IIS 405 Method Not Allowed
- H3C设备网吧万兆光模块解决方案
- 【AI技术】物体识别概述1
- javaweb笔记(方立勋)
- vue项目中解决打开新页浏览器拦截的问题
- java盒图_盒须图简介 - Java报表工具技术讨论,Style Report 报表专题 - OSCHINA - 中文开源技术交流社区...
- 国仁网络资讯:微信视频号怎么变现赚钱;首先要了解平台的底层逻辑与算法原理。
热门文章
- javaScript 对象访问属性的另一种方式
- C# async/await异步编程深入理解
- 16_使用开源项目下载文件
- [转] python提取计算结果的最大最小值及其坐标
- 避免使用PHP保留字作为常量、类名和方法名,以及命名空间的命名
- Web.xml配置详解之context-param (加载spring的xml,然后初始化bean看的)
- cf519D . A and B and Interesting Substrings 数据结构map
- Java的重写equals但不重写hashCode方法的影响
- hibernate的查询方式
- 机器学习常用损失函数