android系统PDA使用RN开发到打包步骤

怼烎@ 2022-12-28 07:49 151阅读 0赞

1.用终端进入自己工作的文件夹

2.`react-native init mxxt_wms_app --version 0.57.8`（我这边mac的node版本最大支持到0.57.8，你可以看自己电脑的node版本情况安装最新的。以后每个客户都有自己的app项目文件夹，单独维护，如这里的mxxt\_wms\_app，代表明新旭腾wms的app。）

3.用终端进入mxxt\_wms\_app目录，安装ant-design，命令：  
`npm install @ant-design/react-native --save` 我这边安装的ant-design版本是写此文档时默认最新的3.1.3，如果要指定版本，可以在native后面加上@版本号

4.执行完成后，再次执行`npm install`，确保所有包都安装了

5.安装babel-plugin-import实现按需加载，命令：  
`npm install babel-plugin-import --save-dev` 我这边安装的babel-plugin-import版本是写此文档时默认最新的1.11.0  
如果你上面安装的react native是0.57.8，那么这里建议还是安装1.11.0（否则可能会出现babel方面的报错，导致app不能运行）  
安装完成后，还需要编辑项目文件夹里的.babelrc文件，增加plugins内容，如下：

{
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": [
        ["import", { "libraryName": "@ant-design/react-native" }]
      ]
    }

6.链接字体图标，命令：  
`react-native link @ant-design/icons-react-native`

7.安装路由导航模块，命令：  
`npm install react-native-router-flux --save`

8.安装启动模块（具体安装步骤也可以参考www.npmjs.com页面上对应模块的介绍），如下：  
第一步，执行命令：`npm install react-native-splash-screen --save`  
第二步，安装完成后，执行命令：  
`react-native link react-native-splash-screen`  
第三步，修改android/app/src/main/java/com/mxxt\_wms\_app/MainActivity.java,修改后如下：

package com.mxxt_wms_app;
    import android.os.Bundle; // here
    import com.facebook.react.ReactActivity;
    import org.devio.rn.splashscreen.SplashScreen; // here
    
    public class MainActivity extends ReactActivity {
    
        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "mxxt_wms_app";
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            SplashScreen.show(this);  // here
            super.onCreate(savedInstanceState);
        }
    }

第四步，在android/app/src/main/res下创建layout文件夹，并在该文件夹下创建launch\_screen.xml文件，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
    </RelativeLayout>

第五步，拷贝mipmap-hdpi、mipmap-mdpi、mipmap-xhdpi、mipmap-xxhdpi、mipmap-xxxhdpi、drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi十一个文件夹到android/app/src/main/res目录下（我是从eos\_wms\_app项目下拷贝的，你可以从mxxt\_wms\_app这个项目下拷贝）  
说明：mipmap-\*文件夹中存放的是桌面图标图片，drawable-\*中存放的是启动页图片。  
第六步，在android/app/src/main/res/values创建colors.xml文件,并写入代码：

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="primary_dark">#000000</color>
    </resources>

第七步，为了防止白屏，还需要修改android/app/src/main/res/values/styles.xml，完整代码如下：

9.安装本地持久存储模块，命令：`npm install react-native-storage --save`

10.拷贝resource、client、config、utils四个文件夹到客户的app项目文件夹下（我是从eos\_wms\_app项目下拷贝的，你可以从mxxt\_wms\_app这个项目下拷贝）

11.修改config文件夹下的config.js文件（看注释修改）

12.拷贝mxxt\_wms\_app文件夹下的App.js，覆盖原有的App.js（我是从eos\_wms\_app项目下拷贝的，你可以从mxxt\_wms\_app这个项目下拷贝）

13.安装自动更新模块react-native-app-upgrade，如下：  
第一步，拷贝android\_upgrade文件夹到android/app/src/main/java/com/mxxt\_wms\_app目录下（我是从eos\_wms\_app项目下拷贝的，你可以从mxxt\_wms\_app这个项目下拷贝）  
第二步，在 app / src / main / res /下创建xml文件夹，在xml文件夹下新建update\_file\_provider.xml文件，内容如下：

第三步，修改android/app/src/main/下的AndroidMainfest.xml，修改处如下：

<application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      
        // 添加fileProvider配置代码
        <provider
            android:name="android.support.v4.content.FileProvider"
            android:authorities="${applicationId}.updateFileProvider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/update_file_provider" />
        </provider>
     
        // 添加Service代码
        <service
            android:name=".android_upgrade.DownloadService"
            android:exported="true" />
            
            // 省略其他代码... 
    </application>

第四步，打开android/app/src/main/res/values/strings.xml文件，添加如下代码:

顺便修改下app\_name，如：明新旭腾WMS  
第五步，修改android/app/src/main/java/com/mxxt\_wms\_app/MainApplication.java，修改处如下：  
a.在顶部加入`import com.mxxt_wms_app.android_upgrade.UpgradePackage;`  
注意自己的项目工程包名，我这里是mxxt\_wms\_app  
b.在getPackages方法中加入`new UpgradePackage()`  
注意加入英文逗号  
第六步，全局搜索`com.cloudbusiness.upgrade`，将其替换为自己的包名，我这边是替换成`com.mxxt_wms_app.android_upgrade`。  
全局搜索`com.d3o`，将其替换为自己的包名，我这边是替换成`com.mxxt_wms_app`。

14.隐藏软键盘，步骤如下：  
第一步，拷贝KeyboardExModule.java和KeyboardExPackage.java到android/app/src/main/java/com/mxxt\_wms\_app目录下  
第二步，打开这两个文件，修改第一行的包名为自己的项目工程包名，我这里是package com.mxxt\_wms\_app;  
第三步，修改android/app/src/main/java/com/mxxt\_wms\_app/MainApplication.java，修改处如下：  
a.在顶部加入`import com.mxxt_wms_app.KeyboardExPackage;`  
注意自己的项目工程包名，我这里是mxxt\_wms\_app  
b.在getPackages方法中加入`new KeyboardExPackage()`  
注意加入英文逗号

15.安装音频模块，命令：`npm install react-native-sound –save`, 并链接`react-native link react-native-sound`（声音剪辑文件保存在目录下android/app/src/main/res/raw。请注意，此目录中的文件必须小写并加下划线（例如，my\_file\_name.mp3），并且Android不支持子目录，用法可参考[音频参考][Link 1]）

16.打开android studio，进入项目的android运行目录（即用android studio打开android文件夹）， 等待自动编译通过（提示或警告信息可以忽略），运行android6.0虚拟机(480\*800的分辨率、API23)。

17.打开终端，cd到项目根目录mxxt\_wms\_app，运行react-native run-android。如果遇到错误: 找不到或无法加载主类 ，请用其它项目中的gradle-wrapper.jar覆盖当前项目里的gradle-wrapper.jar。（路径地址：android/gradle/wrapper/）

18.按照各自项目的需求开发新页面或修改原页面（样式使用ant design）。  
这是以后各个项目的工作点

19.修改android/app/build.gradle文件中的versionName为1.0.0。修改完后，android studio会提示gradle sync，按提示点击即可。

20.开发好后，编译生成签名的apk文件，步骤如下：  
第一步，打包js资源（这一步不可跳过，直接用第二步打包出来的apk，安装后运行会直接闪退）:  
a. 查看android/app/src/main下是否有assets文件夹，如果没有，手工创建一个assets文件夹。  
b.运行  
`react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/`  
第二步，打包apk：  
用android studio打开项目，点击导航菜单里的Build，选择Generate Signed APK，直接NEXT,选择Create new，填写弹出窗中的每一项，填写完成后点击OK，再点击NEXT,选择release并勾上V1和V2，最后点击Finish，等待编辑通过提示成功，即可在android/app/release目录下找到app-release.apk文件。  
注意：a.如果编译过程中遇到Couldn’t follow symbolic link.的错误，请按照提示重新安装对应的node\_modules(删掉node\_modules下错误的文件夹后，重新在命令框中运行npm install即可，我这边只遇到了node-pre-gyp这个module)  
b.如果编译过程中遇到Error: Duplicate resources，请编辑/node\_modules/react-native/react.gradle文件，在doFirst下加入如下代码：

doFirst { ... }
    doLast {
        def moveFunc = { resSuffix ->
            File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
            if (originalDir.exists()) {
                File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
                ant.move(file: originalDir, tofile: destDir);
            }
        }
        moveFunc.curry("ldpi").call()
        moveFunc.curry("mdpi").call()
        moveFunc.curry("hdpi").call()
        moveFunc.curry("xhdpi").call()
        moveFunc.curry("xxhdpi").call()
        moveFunc.curry("xxxhdpi").call()
    }

然后使用android studio中的Clean Project功能（也在Build菜单下），完成后再选择Build菜单下的Generate Signed APK重新打包即可。  
c.如果编译过程中遇到音频文件Error: Duplicate resources，请将android/app/src/main/res/raw下的带前缀android\_app\_src\_main\_res\_raw\_的音频文件解密后剪切至android\\app\\build\\generated\\res\\react\\release\\raw文件夹下，并重新生成apk。

21.如果下次需要更新版本（比如版本从1.0.0更新到了1.0.1），则修改android/app/build.gradle文件中的versionName为1.0.1，versionCode+1（比如原来versionCode是1，这里就修改成2），然后重新执行上面的19。生成的apk文件，放到各自客户项目.net解决方案里的Content/apk目录下（文件名称还是app-release.apk）。最后，打开客户项目的SYS数据库中的sys\_appVersion表，编辑Version字段数据为更新版本号。

22.其它：node\_modules目录需要在svn或git版本控制中忽略。

[Link 1]: https://blog.csdn.net/weixin_44501354/article/details/88420598