React Native釋出APP之打包iOS應用
用React Native開發好APP之後,如何將APP釋出以供使用者使用呢?一款APP的釋出流程無外乎:簽名打包—>釋出到各store這兩大步驟。本文將向大家分享如何簽名打包一款React Native APP。
在本文中我將為大家講解如何打包和釋出React Native iOS App。
第一步:匯出js bundle包和圖片資源
和打包React Native Android應用不同的是,我們無法通過命令一步進行匯出React Native iOS應用。我們需要將JS部分的程式碼和圖片資源等打包匯出,然後通過XCode將其新增到iOS專案中。
匯出js bundle的命令
在React Native專案的根目錄下執行:
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
通過上述命令,我們可以將JS部分的程式碼和圖片資源等打包匯出到release_ios目錄下:
其中,assets為專案中的JS部分所用到的圖片資源(不包括原生模組中的圖片資源),main.jsbundle是JS部分的程式碼。
在執行打包命令之前,我們需要先確保在我們專案的根目錄有release_ios資料夾,沒有的話建立一個。
第二步:將js bundle包和圖片資源匯入到iOS專案中
這一步我們需要用到XCode,選擇assets資料夾與main.jsbundle檔案將其拖拽到XCode的專案導航皮膚中即可。
然後,修改AppDelegate.m檔案,新增如下程式碼:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
...
return YES;
}
上述程式碼的作用是讓React Native去使用我們剛才匯入的jsbundle,這樣以來我們就擺脫了對本地nodejs伺服器的依賴。
提示:如果在專案中使用了CodePush熱更新,那麼我們需要就可以直接通過CodePush來讀取本地的jsbundle,方法如下:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
...
return YES;
}
到目前為止呢,我們已經將js bundle包和圖片資源匯入到iOS專案中,接下來我們就可以釋出我們的iOS應用了。
第三步:釋出iOS應用
上架流程和iOS上架一樣,這裡不做介紹,不會的可以查詢其他資料,網上一大堆
相關文章
- React Native專案自動化打包釋出React Native
- [React Native]使用App Center CLI釋出CodePush更新--iOS簡易版React NativeAPPiOS
- Microsoft Store 桌面應用釋出流程(一)之打包應用ROS
- 《React Native高效開發》之create-react-native-appReact NativeAPP
- 從Android到React Native開發(四、打包流程解析和釋出AndroidReact Native
- react打包 APPReactAPP
- iOS自動整合打包釋出iOS
- 從Android到React Native開發(四、打包流程解析和釋出為Maven庫)AndroidReact NativeMaven
- appuploader iOS 應用自動釋出APPiOS
- iOS應用釋出操作手冊-應用釋出篇iOS
- React Native釋出重構路線圖React Native
- 17-3 react native Android打包React NativeAndroid
- React Native 打包apk的那些坑React NativeAPK
- React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號React Native橋接iOSAndroidAPP
- 開源React Native元件庫beeshell 2.0釋出React Native元件
- 使用CoreRT將.NET Core釋出為Native應用程式
- Flutter Distributor 用於打包和釋出 Flutter 應用的完整工具Flutter
- 2023年最新iOS打包釋出流程彙總iOS
- iOS自動構建打包釋出指令碼iOS指令碼
- react native 的初次嘗試之環境搭建 Mac iosReact NativeMaciOS
- 使用React Native和Expo快速構建原生移動iOS和Android應用程式React NativeiOSAndroid
- React-Native iOS Module開發ReactiOS
- 記一次iOS自動化打包走過的坑-關於React Native-iOS專案iOSReact Native
- React Native學習指南:React Native嵌入到原生應用的一次嘗試React Native
- React Native基礎&入門教程:除錯React Native應用的一小步React Native除錯
- 詳解iOS打包、釋出與證書體系iOS
- 向React Native應用新增螢幕捕捉功能React Native
- React Native開發中自動打包指令碼React Native指令碼
- ? React-Native 官方示例演示 ( ios & android)ReactiOSAndroid
- 探索 react-native run-ios(android)ReactiOSAndroid
- Microsoft Store 桌面應用釋出流程(二)之提交應用ROS
- 使用duxapp開發 React Native App 事半功倍UXAPPReact Native
- 開始測試React Native App(下篇)React NativeAPP
- 開始測試React Native App(上篇)React NativeAPP
- 我的第一個React Native AppReact NativeAPP
- react native 安裝app時報錯 ”已安裝了簽名衝突的應用“React NativeAPP
- 優雅地使用TypeScript開發React Native應用TypeScriptReact Native
- 來聊聊react-native應用的健康監控React