環境安裝
推薦直接查看官網,介紹的很詳細,嫌門檻高,那就React Native 中文網。
開發工具
IDE建議使用VS Code,比較輕量級,插件想裝就裝,插件當然首選React Native Tools,建議下載好後,搜索安裝。
安裝好VS Code後,可以瞭解幾個常用的快捷鍵
Alt + Shift + F 格式化
Ctrl + [ 選中內容縮進向左移動
Ctrl + ] 選中內容向右移動
Ctrl + C 複製當前行
Ctrl + V 粘貼複製的內容
Ctrl + X 剪貼當前行
Ctrl + / 行註釋
Ctrl + F 查找
Ctrl + H 替換
Alt + Shift + A 塊註釋
Alt + ↓ / ↑ 向上/向下移動行
Ctrl + K Ctrl + 0 (Ctrl + K + 0) 全局方法摺疊
Ctrl + K Ctrl + J (Ctrl + K + J) 全局方法展開
Ctrl + Shift + [ 當前塊摺疊
Ctrl + Shift + ] 當前塊展開調試可以使用模擬器,百度搜索可以顯示一大堆,建議還是使用系統模擬器,下載Android Studio會自帶,有條件的就使用真機吧
常用命令
開發之前先了解幾個常用到的npm命令
npm list -g --depth 0 //查看已安裝的包
npm i 'name' / npm install 'name' //安裝
npm i -g 'name' //升級
Ctrl + M //打開模擬器調試選項
adb shell input keyevent 82 //通過命令行打開模擬器調試選項
導入項目
項目下載好後,通過命令行進入目錄
npm install //安裝項目依賴
npm rm -rf node_modules //強制刪除node_modules文件夾
npm rm -rf node_modules && npm install //上兩者的結合
引入依賴
npm install --save react-native-webview //引入webview控件
react-native link react-native-webview //關聯webview,某些需要原生支持,故需要添加link
瞭解
把環境安裝好,先按照提示,寫個**Hello,World!**練練手
建議先把入門基礎按照提示比對敲完,這時大致對react語法有個認識
React基於ES6,那就好了,咱們找個簡答的教程菜鳥教程,趕緊熟悉下
啥,你說ES6教程這麼簡答,那是怕打消你的自信心,來給你個複雜的教程ECMAScrip 6 入門,這個文檔可能有點複雜,看不完也別怕,後續咱們可以直接項目瞭解
這個時候,因爲對應用還不瞭解,暫不建議你看官網的進階指南和使用指南
上手
如何上手快,當然是跟着項目一起做嘍,這裏推薦一位大神的教程,如果視頻找不到,建議翻翻教程裏的評論,視頻教程只有幾章,花上一週時間,完全可以跟着視頻敲出來。
當然,因爲視頻錄製的比較早,可能某些控件已被官方廢棄,引入方式發生變化,需要在導入的時候注意,爲避免彎路,這裏給出對部分已廢棄控件的導入方式,見文末。同時,如果原教程的項目源碼不能夠正常安裝,這裏給出一份最新代碼,可以參考,點這裏,下載運行查看效果就是了,如果不知道怎麼安裝,請查看上面導入項目介紹。
項目中後續會有其他的小demo,有時間會一直更新。
跟進
如果你跟着教程已經完整的敲了一遍,那麼恭喜你,你會發其實具體和原生開發差不多,無非就是控件名稱和事件的不一致,堅持做下去就會了解了。
這個時候,估計你會對react的其他控件有些好奇,建議把官網上的進階指南和使用指南完整的看上一遍,再找個簡單的項目,上手試試。
再項目裏會經常遇到各種控件的導入和使用問題,經常性的報錯,建議能夠耐住性子看下去,一般日誌裏回有提示。
還有控件的link和使用問題,最好一上來就去找教程,可以試着到node_modules裏找到該項目引用,一般readme裏會有使用介紹,或者看源碼暴露出的屬性和方法,要麼就去到github上找到該庫,看看作者的具體介紹。
附
AsyncStorage引入
npm install @react-native-community/async-storage --save
react-native link @react-native-community/async-storage
WebView引入
npm install react-native-webview --save
react-native link react-native-webview
Navigator引入
npm install react-native-deprecated-custom-components --save
PropTypes引入
npm install --save prop-types
TabNavigator引入
npm install --save react-native-tab-navigator