React-Native學習(iOS程序員筆記)

博客將要搬家了在這里,感謝大家的關注

此博客將記錄我(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、學習的兩個重點,布局和語言

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、卡頓是用戶體驗的殺手

React?Native痛點解析之性能調優

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

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,下載模擬器

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容