博客將要搬家了在這里,感謝大家的關注
此博客將記錄我(ios程序員)學習RN很有價值的內容,代碼學習可以參考ReactNativeLeaning(ES6版),最后附了一個sinaWebBo項目,希望大家不吝賜個star。
支持一下新封裝的react-native-image-browser,賞個star吧
增加“如何運行在android模擬器”
1、Hello World!
react-native init AwesomeProject 卡住不動:解決React Native初始化項目速度很慢的問題;
2、選個好用的編輯器:atom+nuclide的詳細使用方法
這個編輯器很好用,有察看dom結構和debugger功能,不過如果你喜歡別的編輯器也可以用;
3、學習的兩個重點,布局和語言
- 如果布局不會請參考阮一峰的Flex 布局教程:語法篇和張鑫旭的CSS box-flex屬性,然后彈性盒子模型簡介
- 如果es6不會請參考阮一峰的ECMAScript 6入門,如果你以前了解過js,再看看看es5與es6的區別吧,這篇文章對于熟悉es5不熟悉es6的來說很有價值
4、控件是頁面展示的基本組成
react是基于組件開發的,但是組件是由控件組成的。
什么是常用的,按我的經驗來說幾個,View(為布局而生)、Text(文本展示)、TextInput(輸入框)、TouchableHighlight(按鈕)、Navigator(導航控制器,多頁面控件)、TabBarIOS(多頁面控件)
Navigator詳解
5、看看官方的Demo
github地址在這里,在examples文件夾里有幾個很簡單的demo,對于熟練編碼還是有價值的,不妨跟著敲一遍,不過都是es5實現的,其中movies的es6實現在這里(不過不完全)。
5.1 如何運行官方的Demo呢?我用運行UIExplorer舉例
- 1.cd 到UIExplorer文件夾;
- 2.npm install;安裝完后,直接在UIExplorer文件夾下運行react-native run-ios,會報錯:Command
run-ios
unrecognized. Did you mean XXX,為何會報錯還不知道; - 3.運行“開發服務器”,如果你的編輯器是atom,那么cmd+shift+p,輸入start packager,回車就會打開服務器了(或者在UIExplorer文件夾下npm start即可);
- 4.使用xcode運行。
5.2 可能會遇到的error
- 1.Could not connect to development server:沒有啟動服務器,如何啟動上面提到了使用atom的啟動方式和npm start方式;
- 2.cannot find entry file examples/UIExplorer:這是因為當前啟動的服務器是別的項目的,需要重啟服務器;
6、卡頓是用戶體驗的殺手
7、看看真機運行效果
這里只說下ios的,android可以參考 React Native真機調試
1、將AppDelegate中sourceURL的localhost改為電腦的ip;
2、啟動服務器,啟動方法在上面的5.1.3有提到;
3、運行程序。
ps:手機和電腦要用數據線連接;手機和電腦要連到相同的wifi下
8、如何運行在Android模擬器
安裝jdk和android studio(都裝最新的就行了),以下問題都是我按順序遇到的:
1、SDK location not found. Define location with sdk.dir in the locSDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable
- 如何查看sdk location:打開android studio --> preferences -> 查找sdk即可看到路徑;
- 設置ANDROID_HOME:參考https://spring.io/guides/gs/android/
Mac OS X export ANDROID_HOME= sdk 路徑 export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
2、failed to find target with hash string 'android-23' in: 你的sdk的路徑:直接在android studio中的preferences里搜sdk,然后apply就行了
3、failed to find Build Tools revision 23.0.1: 還是在android studio的preferences的Android SDK下,選擇SDK Tools,勾選右下角的Show Package Details,選擇23.0.1的就行了,然后apply
4、com.android.builder.testing.api.DeviceException: No connected devices!:找工具欄的AVD Manager,下載模擬器