在SAP除了使用Cordova生产移动应用外,还有这种方式

简介: 本文和Jerry过去的文章不太一样,算不上Jerry的知识分享,只是记录一下Jerry用React-Native把应用安装到Android手机上遇到的一些问题,方便以后查看。Jerry的同事Leo用React-Native开发了一个应用,现在Jerry需要把这个应用在自己的安卓手机上运行起来。

本文和Jerry过去的文章不太一样,算不上Jerry的知识分享,只是记录一下Jerry用React-Native把应用安装到Android手机上遇到的一些问题,方便以后查看。

Jerry的同事Leo用React-Native开发了一个应用,现在Jerry需要把这个应用在自己的安卓手机上运行起来。

clipboard1,1

客户启动这个应用后,自动召唤出手机上的摄像头,对身边的物品进行拍照,然后把照片上传到SAP Cloud Platform的Leonardo那里,消费机器学习API之一的Similarity score服务,返回最相似的三个图案。

clipboard2

去年Jerry的C4C开发团队同事,Yang Joey曾经写过一篇文章:SAP移动应用解决方案之一:HTML5应用 + Cordova = 平台相关的混合应用,介绍了SAP Cloud for Customer的移动端应用是怎么基于开源项目Cordova创建的,当时文章曾经提及,使用Cordova打包成的移动应用,实际上运行在移动平台的WebView里。而React-Native则有着和Cordova完全不同的设计理念。

clipboard3,3

关于这两种技术的比较,网上有很多的文章,大家根据关键字“React-Native Cordova”搜索就行了,比如这篇:

https://www.toptal.com/mobile/comparing-react-native-to-cordova

clipboard4,4

Jerry是按照React-Native中文网站一步一步操作的,过程中遇到一些问题,全都是和Android平台相关的,React-Native官网没有提及,最后靠Google都顺利解决了。

clipboard5,5

Could not resolve project: react-native-camera

clipboard6,6

Google找到一个链接:https://github.com/react-native-community/react-native-camera/blob/master/docs/migrationV2.md#android

需要在应用的android/app/build.gradle文件里添加一行配置:missingDimensionStrategy 'react-native-camera', 'general'

clipboard7,7

com.android.builder.testing.api.DeviceException: No connected devices!

clipboard8,8

这报错信息很清楚,React-Native cli不知道应该将打好包的应用安装在什么地方。解决方法也很容易,要么启动一个Android模拟器,要么用USB连接真机。

用AVD manager启动一个模拟器:

clipboard9,9

然后重新执行react-native run-android, 就能将应用安装到模拟器上了。

clipboard10,10

或者用USB连接手机,打开手机上的USB调试选项:

clipboard11,11

一样能够通过react-native run-android将应用直接装到手机上:

clipboard12

Failed to install the following Android SDK packages as some licences have not been accepted.

clipboard13,13

这个错也容易解决,执行sdkmanager.bat --licenses, 一路选择Y接受所有的licenses即可。

clipboard14,14

cannot find symbol import androidx.annotation.Nullable;

clipboard15,15

编译错误。在应用的android文件夹的gradle.properties配置文件里,增加下面两条配置记录:
android.useAndroidX=true
android.enableJetifier=true

clipboard16,16

之后这个编译错误就没有了。

clipboard17,17

因为Leo开发的这个React-Native应用里面可以用JavaScript代码调用手机摄像头,Jerry觉得非常神奇,出于好奇,打开Leo的代码学习了一下。

从react-native-camera库里导出RNCamera组件:

clipboard18,18

到React-Native应用文件夹node_modules下查看RNCamera的实现,发现果然是根据移动操作系统的类型分别作了处理。如果是Android平台,使用摄像头对应的权限为:PermissionsAndroid.PERMISSIONS.CAMERA

clipboard19,19

在Android平台下使用摄像头的Java代码,存放在对应的android文件夹里。

clipboard20,20

Jerry以前使用Cordova生产移动移动时,曾经研究过Cordova应用里的JavaScript代码是如何调用Android平台上原生的Java代码的,也在SAP社区上写了一些文章:

https://blogs.sap.com/2017/08/18/step-by-step-to-create-a-custom-cordova-plugin-for-android-and-consume-it-in-your-ui5-application/

这篇文章介绍的是如果发现Cordova提供的标准插件不能满足我们的需求时,我们可以用Java开发自定义的Cordova插件,然后在JavaScript代码里调用。

clipboard21,21

Cordova里JavaScript代码调用Java代码的原理,Jerry在这三篇SAP社区博客里介绍过:

至于React-Native应用里的JavaScript代码是否通过同样的原理调用Java代码,Jerry还没有时间去研究,因为我下一步需要弄清楚如何使用React-Native基于Android平台打一个可以安装的apk文件出来,这样才能分发给其他同事测试。

感谢阅读。

更多阅读

  • SAP移动应用解决方案之一:HTML5应用 + Cordova = 平台相关的混合应用
  • SAP Fiori应用的三种部署方式

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

相关文章
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
|
传感器 存储 移动开发
SAP UI5 应用开发教程之五十 - 如何使用 Cordova 将 SAP UI5 应用生成一个能在 Android 手机上安装的混合应用试读版
SAP UI5 应用开发教程之五十 - 如何使用 Cordova 将 SAP UI5 应用生成一个能在 Android 手机上安装的混合应用试读版
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
|
缓存 测试技术 BI
SAP Gateway 在开发系统和生产系统上的缓存控制
SAP Gateway 在开发系统和生产系统上的缓存控制
|
API 容器
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
SAP 生产工单长文本保存
小坑: 创建完成之后,必须根据工单号更新aufk的ltext = 1 否则CO03前台看不到写入的长文本。
686 0
|
BI
ZMRP(SAP生产机强制修改代码)(慎用!!!)
SAP强制修改自开发报表代码
133 0
|
缓存 测试技术 BI
SAP Gateway 在开发系统和生产系统上的缓存控制
SAP Gateway 在开发系统和生产系统上的缓存控制
108 0
|
API 容器
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
sap.ndc.BarcodeScannerButton:用于启动条码扫描过程的按钮控件(显示条码图标)。
128 0
SAP UI5 BarcodeScannerButton 的初始化逻辑 - feature 检测,Cordova API 检测等逻辑
|
Web App开发 Android开发
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
161 0
SAP UI5 应用开发教程之五十二 - 如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版