rnapp
A. rn剛進入app程序會白屏怎麼解決
在啟動頁設置回 android:theme="@答style/splash_style"
<activity android:name=".Activity.SplashActivity"
android:theme="@style/splash_style"
android:screenOrientation="portrait">
<style name="splash_style" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@mipmap/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowActionBar">false</item>
</style>
B. 現在有哪些APP是用React Native開發的
直接登入React Native官網,在React Native官網案例上可以查詢到,其中就有我們大家熟知的QQ空間,還有一些我們不太熟知的軟體。
C. 自己做APP,我是使用ReactNative還是分別做Android和iOS Native的
還是分別
c
D. react native 怎麼樣
React.native是目前唯一靠譜有前途的移動跨平台解決方案。
搞移動跨平台,解決方案已經有過很多了。Xamarin, Cordova, 基於webView的PhoneGap, 還有一大票各種創業公司的方案。它們都很垃圾。原因很簡單:為達成「一次編寫到處運行」的目的,這些方案不得不對兩個主要平台(iOS和Android)的SDK做進一步的抽象,這意味著它們只能兼容兩個平台共有的組件,結果就是寫出來的app只能做到最平庸的用戶體驗。特別是微軟的Xamarin,連自家的Windows Phone都搞不好,還給Apple和Google的SDK做包裝,那能好么?基於Web的方案就更不用說了,本質就是拿HTML套個殼外加一些原生寫的插件。
React.native的高明之處在於:它並不追求一次編寫到處運行,它放棄了全部代碼跨平台這一不切實際的目標。RN的目標很實際:用同一門語言(Javascript),同樣的高層架構(Virtual DOM)和設計模式(component-based),針對不同平台分別作出最佳的用戶體驗。這也就是RN中「native」一詞的含義。
在實際開發中,要做到最佳用戶體驗,針對iOS和Android應該要分別編寫UI代碼的。實際上RN也鼓勵這么做。Android是Android,iOS是iOS,web是web,三者有不同的界面語言和用戶習慣,憑什麼要一樣呢?但除卻UI,業務邏輯、data object、web call等等卻是可以一樣的。再加上採用了同一門語言和設計模式,RN在生產力上非常有競爭力。從另一方面看,Flux設計模式反過來也被原生開發社區接受,Rex庫在Java和Swift上都有翻版原生實現,所以你不一定要用RN寫app,但你還是可以借鑒採用React的設計模式。React項目對於整個開發社區的影響很正面,比PhoneGap這種催生了一大票廉價app碼農的垃圾技術正面多了。
另外,純Javascript的開源庫也可以直接應用到ReactJS/ReactNative中,這也進一步提升了生產力。
E. 如何愉快地調試一個 React Native for Android APP
首先確保你的電腦和手機設備在同一個Wi-Fi環境下。
其次你需要開啟USB調試才能在你的設備上安裝你的APP。一定要確定你已經打開設備的USB調試開關!
確保你的設備已經被成功連接,可以輸入adb devices核實:
在右邊那列看到device說明你的設備已經被正確連接了。注意,你只應當連接僅僅一個設備。
因為如果你連接了多個設備(包含模擬器在內),你後續的一些操作可能會失敗。拔掉不需要的設備,或者關掉模擬器,確保adb devices的輸出只有一個是連接狀態。
現在我們可以運行 react-native run-android 來在設備上安裝並啟動我們的應用了
這
句命令執行後,實際上就是在本地起一個node server,並且將你的android
project編譯打包,再上傳到你的手機上。然後當js文件有改動或debug模式下手動選擇reload
js時候會自動更新bundle文件,達到改動js文件後即時顯示的調試效果。
這「紅屏」又是什麼鬼?別著急,是正常的,我們需要連接上開發伺服器,下面的步驟會解決這個問題。
搖晃手機,或者運行adb shell input keyevent 82,可以調出開發者菜單。
點擊進入Dev Settings
點擊Debug server host for device
輸入你電腦的IP地址和埠號(譬如我的是192.168.3.15:8081)
注意:如果你的設備是android5.0以上版本(API 21+),就不用折騰這步了
而是:運行adb reverse tcp:8081 tcp:8081 (建立一個從設備向電腦轉發的埠,前提是設備和電腦通過USB相連)
不需要更多配置,你就可以使用Reload JS和其它的開發選項了
Chrome開發者工具
在Chrome上調試js代碼,需要在開發菜單中選擇Debug JS,這會打開一個新的http://localhost:8081/debugger-uitab頁。
在
Chrome中,按下⌘ + option + i或者選擇視圖(View) -> 開發者(Developer) ->
開發工具(Developer Tools)來打開開發工具控制台。打開有異常時暫停(Pause On Caught
Exceptions)選項,能夠獲得更好的開發體驗。
Chrome中並不能直接看到App的用戶界面,而只能提供console的輸出,以及在sources項中斷點調試js腳本。
要查看APP日誌?
在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。
實時刷新
這個選項可以在你的js代碼變更了之後,自動觸發所連設備或者模擬器自動刷新。
開啟方法:先打開開發菜單,選擇Dev Settings,然後選擇Auto reload on JS change選項。
到此才能完整的調試Android RN, 繁瑣到累絕不愛。。
等等,能否想辦法簡化一下過程?
既然我們的RN項目里包含了完整的android工程,何不把android工程導入到android studio 去運行?不但可以同時查看js的日誌和native的日誌,而且開發android的同學最熟悉AS,利用AS的快捷鍵和各類插件提升調試效率。
have a try , 答案是肯定的!
執行react-native start 也可以起一個node server,只是它不幫你安裝APP到device 。
以上就是我踩坑後整理的方法,按這套組合拳就可以愉快地調試了。水平有限,拋磚引玉,如果你有更好的方法!歡迎拍磚!
此處插播一個廣告:拍磚請拍到我們的杏樹林開放空間(246078103),期待感興趣的同學加入。
之後要解決的一些issue
1,關於設備MinSdkVerison
RN 只支持Android4.1.2(API16)以上設備,4.0根據網路數據大概佔比0.7比例,隨著大部分app已經不支持4.0以下設備了,這塊倒還可以接受 , 目前我們的病歷夾是3.0(API-11) , 口袋是4.0(API-14)
2,我們的androidRN現在只能通過Debug JS才能渲染出界面,而不能正常的用Reload JS
3,在界面跳轉時卡的令人發指
F. RN,開發打包APK文件時報錯,怎麼解決
有重復的資源文件,檢查一下。
G. react native 怎麼修改入口文件
react native 怎麼修改入口文件?
如題,怎麼讓iOS和android共用一個入口文件?
4個回答
答案對人有幫助,有參考價值1答案沒幫助,是錯誤的答案,答非所問
表示這個需求有點奇怪,為什麼需要讓 iOS 和 Android 公用同一個入口文件呢?即便重復的東西很多,也可以建一個公用的 js 然後在 index.ios.js 和 index.android.js 里都引入它。
如果非要更改這個入口文件的話,你可以在項目里全局的搜索一下 index.ios 和 index.android, 看看它們的載入流程,比如說 index.ios 就在 AppDelegate.m 里用到了:
jsCodeLocation = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:8081/index.ios.bundle?platform=ios&dev=true", ip]];
你可以嘗試去改一改,讓它從別的地方載入。 但是總體上還是建議不要這樣折騰,以後版本升級之類的時候,給自己填堵。
看圖:
RN 本來就是一次開發兩個平台,合並入口文件很正常。
以最新的0.31為例
直接上正確答案:
IOS
[[RCTBundleURLProvider sharedSettings] setDefaults];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"/rn/app" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moleName:@"Demo"
initialProperties:nil
launchOptions:launchOptions];
其中@"/rn/app"就是相對 RN 根目錄的入口文件,@"Demo"是你注冊的應用名。
android:
復寫getJSMainMoleName方法就行
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected String getJSMainMoleName() {
return "rn/app";
}
};
_rnRoot_/rn/app.js 就是你的入口文件,如上例隨便你改
H. rn 開發的ios app 能審核過嗎
就是審核過了,等待你最後確認發布到appstore,等你確認後就會進入正在為 App Store 進行處理,就靜等上線了。