1. 程式人生 > >React-Native 編譯打包遇到的坑

React-Native 編譯打包遇到的坑

費盡千辛萬苦終於把RN的東西整合到自己的專案裡去,打算打包上線,但是在使用gradle打包的過程中,碰到各種奇葩問題,明明自己的操作都是按著官網操作(React-Native專案打包),但是還是出現問題,然後費勁腦汁,終於把遇到的各種問題解決。
總結一下,在React-Native專案打包過程中。
首先,按著正常操作配置自己專案的.keystore資訊在build.gradle中(此步驟不做詳細描述)
其次,在專案的application下的src/main目錄下建立assets目錄,並在AS下的Terminal下執行react-native bundle –platform android –dev false –entry-file index.android.js \ –bundle-output …/src/main/assets/index.android.bundle \ –assets-dest …/src/main/res/,生成index.android.bundle檔案,(…代表application的名字

),此過程是將JS程式碼打包到本地。
最後在proguard-rules.pro混淆檔案中新增如下程式碼


-ignorewarnings

-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native <methods>; }
-keepclassmembers class
* { @com.facebook.react.uimanager.UIProp <fields>;
}
-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp <methods>; } -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; } -keep class com.facebook.** { *; }
-dontwarn com.facebook.react.**

然後使用gradlew assembleRelease打出release包即可

相關推薦

React-Native 編譯打包遇到的

費盡千辛萬苦終於把RN的東西整合到自己的專案裡去,打算打包上線,但是在使用gradle打包的過程中,碰到各種奇葩問題,明明自己的操作都是按著官網操作(React-Native專案打包),但是還是出現問題

react-native android打包

ima lan fault inf ble 當前 div release size 步驟 1.生成密鑰 2.修改android/app/build.gradle 文件 3.修改android/gradle.properties 4.cd android &&am

React-native APK打包

blog 工具 nat 調用 class gen android 完成後 代碼 安卓相關工具配置到環境變量,這樣可以將安卓相關工具可以直接在cmd命令中調用 1 檢查gradle版本 查看裏面對應的編譯工具版本號,如果提示版本不對你,那麽直接去更新a

React Native Android打包出現的問題

一、./gradlew installRelease 出現 * What went wrong: Execution failed for task ':app:bundleReleaseJsAndAssets'. > 'command 'node'' finished wit

react中antd打包體積太大和className命名

前端使用antd的時後打包體積太大, 如圖1.6M還是挺大的,把antd所有的資源都載入進入了 根據antd 官網的推薦,按需載入方式居於.babel配置 這樣再來看看打包分析的 按需載入打包了button和layout 在src檔案下也只引用了這個兩個元件

React-Native開發中的點實錄

從移動開發的角度來說,iOS和Android都有自己的一些UI特性,所以react-native宣稱的寫一套程式碼就可以通用就是騙人的鬼話,實際開發中,你會發現很多控制元件在iOS和Android上展示的效果不一樣,或者有些屬性支援iOS不支援Android。rea

react-native-wechat接入填文件

React Native(以下簡稱RN)繫結微信分享/微信登入/微信支付的實現演示+原始碼+注意事項!微信的呼叫大同小異,本文實現了微信的分享功能,其他功能可以在連結文件裡面找到具體的方法。 本文分文三個部分:一、效果展示;二、實現步驟;三、注意事項; 一、效果展示

react native 與伺服器互動

今天遇到兩個坑 一個是以表單formData封裝的JSON格式資料不是標準的json格式,導致伺服器解析資料是錯誤返回400 bad request。例如 let formData = new FormData(); formData.append("api_accou

React-Native 踩過的

React Native執行的時候,經常碰到React Native unable to load script from assets index.android.bundle on windows解決方法有2種: 方法一:設定IP和埠 具體步驟:報錯頁面晃動手機,顯示

React Native Android 開發巨

〇. Android Native 接入 React Native 1. 基本配置規則 https://reactnative.cn/docs/integration-with-existing-apps/ 2. 稍作優化 如果Native庫用得太多,建議把package

執行react-native專案遇到的

最近接手了一個react-native專案,用xcode執行的時候,各種坑,各種報錯,現在抽時間整理一下 1.找不到標頭檔案 RCTJPushModule.h 一上來就報這個錯,翻閱一些資料找到解決辦法 開啟終端,cd到專案資料夾,輸入 npm install jpu

初始化react-native專案執行採

第一坑.react和react-native版本配合有很高的要求 init專案啟動後報如下錯誤: error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/appl

React-Native版本升級踩

由於xcode更新到8,React-Native版本低於0.32的在xcode8中執行選擇模擬的系統小於IOS9.3會報錯,打包出來的版本在安裝時IOS系統低於9.3,執行時會崩潰。由於我目前使用的是react-native的版本是0.23,諮詢過faceboo

ZhiHuDaily-React-Native編譯

知乎日報的github地址:https://github.com/15527822118/ZhiHuDaily-React-Native 如果reactnative命令一直出現版本錯誤就呼叫nvm install node && nvm ali

react-native 編譯報錯: undefined is not an object (evaluating '_react2.PropTypes.func')

情況通報: 因為是我的二維碼模組報錯,提示報錯程式碼如下 重要資訊是下面的紅色字型部分(Android 模擬器紅屏) undefined is not an object (evaluating '_react2.PropTypes.func')<unknown> D:\CDM_POS_AP

react-native 編譯 undefined is not an object (evaluating '_react2.PropTypes.func')

情況通報: 因為是我的二維碼模組報錯,提示報錯程式碼如下 重要資訊是下面的紅色字型部分(Android 模擬器紅屏) undefined is not an object (evaluating '_react2.PropTypes.func')<unknown> D:\CDM_POS_AP

React Native 編譯Android專案問題整理

React Native 編譯Android App時,遇到了一些問題,現在整理記錄。 1. 使用命令react-native run-android編譯App時,丟擲類似域名無法解析而不能下載檔案的問題 解決方式: 一般是因為牆。 第二種,如果是因為Https協議的原

React-Native 專案打包(iOS/Android)

1. Android 打包 第一步:生成Android簽名證書 簽名APK需要一個證書用於為APP簽名,生成簽名證書可以Android Studio以視覺化的方式生成,也可以使用終端採用命令列的方式生成。 第二步:設定gradle變數 1

react-native ios打包教程

1.找到專案裡的ios資料夾,在此資料夾下新建一個資料夾取名bundle 2.開啟終端,cd到專案的根目錄 3.執行命令,react-native bundle --entry-file ./index.ios.js --bundle-output ./ios/bundl

react native專案打包apk後WebView不顯示

解決android上打包rn專案後webview不顯示 <WebView ref={(w) => { this.webview = w }} javaScri