Ⅰ android 打開rn頁面怎麼平滑過渡
不講道理式。特點:不管3721,先在PagerAdapter的getCount();里返回一個很大的值。保守的返回個100,極端的直接Integer.MAX_VALUE。看到這里估計就已經有很多孩子笑了,這尼瑪跟大學C語言課本上,數組長度未知就定義個1000單位的思想簡直如出一轍啊有木有!!!好吧,那麼這種方法顯然並沒有真的解決問題,雖然不會有幾個用戶真有耐心去滑動Integer.MAX_VALUE / 2次。。。不過鑒於目前網上其它方法都有這樣那樣的缺陷,還是有不少人寧願選擇這個的。那麼我就說詳細點吧。這個方法後續操作中,比較關鍵的步驟有兩點: 一、一定要設置初始位置為Integer.MAX_VALUE / 2,即
[java] view plain
setCurrentItem(Integer.MAX_VALUE / 2);
Ⅱ 區分頁面是rn還是android原生
android用的是java語言開發的,RN是用JS語言開發的。你可以看一下app的特殊效果,有web樣式獨有的就是RN,原生的效果和動畫會給人更穩定的感覺
Ⅲ android rn 是什麼意思
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this
Ⅳ 如何評價 React Native Android
React Native項目成員Tom Occhino發表的React Native: Bringing modern web techniques to mobile(牆外地址)詳細描述了React Native的設計理念。Occhino認為盡管Native開發成本更高,但現階段Native仍然是必須的,因為Web的用戶體驗仍無法超越Native:
1. Native的原生控制項有更好的體驗;
2. Native有更好的手勢識別;
3. Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼、文本渲染仍無法多線程渲染,這影響了Web的流暢性。
Occhino沒提到的還有Native能實現更豐富細膩的動畫效果,歸根結底是現階段Native具有更好的人機交互體驗。筆者認為這些例子是有說服力的,也是React Native出現的直接原因。
圖3 - Occhino在F8分享了React Native(Keynote)
Learn once, write anywhere
「Learn once, write anywhere」同樣出自Occhino的文章。因為不同Native平台上的用戶體驗是不同的,React Native不強求一份原生代碼支持多個平台,所以不提「Write once, run anywhere」(Java),提出了「Learn once, write anywhere」。
圖4 - 「Learn once, write anywhere」
這張圖是筆者根據理解畫的一張示意圖,自下而上依次是:
1. React:不同平台上編寫基於React的代碼,「Learn once, write anywhere」。
2. Virtual DOM:相對Browser環境下的DOM(文檔對象模型)而言,Virtual DOM是DOM在內存中的一種輕量級表達方式(原話是lightweight representation of the document),可以通過不同的渲染引擎生成不同平台下的UI,JS和Native之間通過Bridge通信(React Native通信機制詳解 ? bang's blog)。
3. Web/iOS/Android:已實現了Web和iOS平台,Android平台預計將於2015年10月實現(Blog | React)。
前文多處提到的React是Facebook 2013年開源的Web開發框架,筆者在翻閱其發布稿時,發現這么一段:
圖5 - 摘自React發布稿(2013)
1. 加亮文字顯示2013年已經在開發React Native的原型,現在也算是厚積薄發了。
2. 最近另一個比較火的項目是Flipboard/react-canvas · GitHub(詳見 @rank),渲染層使用了Web Canvas來提升交互流暢性,這和上圖第一個嘗試類似。
React本身也是個龐大的話題不再展開,詳見facebook/react Wiki · GitHub。
筆者認為「Write once, run anywhere」對提升效率仍然是必要的,並且和「Learn once, write anywhere」也沒有沖突,我們內部正在改造已有的組件庫和HybridAPI,讓其適配(補齊)React Native的組件,從而寫一份代碼可以運行在iOS和Web上,待成熟後開源出來。
持續更新…
二、規劃
下圖展示了業務和技術為React Native所做的改造:
圖6 - 業務和技術改造圖6 - 業務和技術改造
自下而上:
1. React Node:React支持服務端渲染,通常用於首屏服務端渲染;典型場景是多頁列表,首屏服務端渲染翻頁客戶端渲染,避免首次請求頁面時發起2次http請求。
2. React Native基礎環境:
2.1. Framework集成:盡管React Native放出了Integration with Existing App文檔,集成到現有復雜App中仍然會遇到很多細節問題,比如集成到天貓iPad客戶端就花了組里iOS同學2天的時間。
2.2. Networking改造:主要是重新建立session,而session通常存放於http header cookie中,React Native提供的網路IO fetch和XMLHttpRequest不支持改寫cookie。所以要不在保證安全的條件下實現fetch的擴展,要麼由native負責網路IO(已有session機制)再通過HybridAPI由JS調用,暫時選擇了後者。
2.3. 緩存/打包方案:只要有資源從伺服器端載入就避免不了這個話題,React Native也是如此,緩存用於解決資源二次訪問時的載入性能,打包解決的是資源首次訪問時的載入性能。
3. MUI是一套組件庫,目前會採用向React Native組件補齊的思路進行改造。
4. HybridAPI是阿里一組Hybrid API,此前也在多個公開場合(如感測器 @杭JS)分享過不再累述,React Native建立了自己的通信機制,看起來更高效(未驗證),改造成本不大。
5. 最快的一個業務將於4月中上線,通過最初幾個業務改造推動整體系統的改造,如果效果如預期則會啟動更大規模的業務改造。
更多詳細規劃和進展,以及性能、穩定性、擴展性的數據隨後放出。
三、風險
1. 盡管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native,隨著React Native大規模應用,Appstore的政策是否有變不得而知,我們只能往前走一步。
* 更新:
2015.7.28 AppStore審核政策調整:允許運行於JavascriptCore的動態載入代碼,下圖是此前的審核政策,對比加亮部分的改變。
2. React Native Android 已於2015.9.15發布,第一個使用RN開發的Android App(Facebook Adverts Manager)6.29已上架Play了。
3. iOS6 javascriptCore.framework 為私有,如在iOS6上使用有拒審風險。(http://stackoverflow.com/questions/23514579/javascriptcore-framework-availability-on-ios),可以通過JavaScriptCore-iOS · GitHub這個庫代替,涉及改動較多,只在實驗階段支持了iOS6。
4. ListView 性能問題需要持續關注(ListView renders all rows? · Issue #499 · facebook/react-native · GitHub)
React Native相對於Webview和Native的優勢和劣勢 @berg 也給出了較詳細的描述,可以相互參照。
Ⅳ 如何愉快地調試一個 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,在界面跳轉時卡的令人發指