如何學習React Native

學習任何技術，最快捷的方法就是學習完基礎語法，然後模仿開源項目進行學習，React Native也不例外。以其中一個舉例子.給大家演示下如何運行開源項目.(前提是你已經搭建好React Native環境了)

下載開源項目

首先需要找到開源項目 ,比如下面這個.
地址: https://github.com/Bob1993/react-native-gank

進入github, clone到本地或者直接download到本地。
按照之前運行自己項目的經驗，我們會直接在控制檯進入項目目錄，然後輸入
react-native run-ios 或者react-native run-android
這時候發現並沒有react-native 指令.
原因是這樣的, 大部分開源項目並不是完整的項目, 缺少了項目的依賴, 就像我們運行java沒有jdk環境一樣。

下面是一個完整的項目：

而開源項目爲了減少空間，並沒有提交node_mudules目錄，需要我們自己安裝

npm安裝node_modules

node_modules 是整個項目的依賴， 裏面包含什麼呢？ 包含的文件全部都寫在package.json 文件中了。 這個文件是必不可少的。我們需要按照這個列表下載。

這時候需要給大家簡單介紹下，因爲react native項目是通過nodejs構建的，所以在nodejs項目中都需要package.json 文件。具體大家可以看看nodejs相關知識 。 七天學會 Nodejs

安裝node_modules 非常簡單， 進入項目目錄執行命令
npm install
會自動按照package.json下載對應的依賴。
但是問題來了， 經常會出現下面的錯誤：

錯誤

大部分都是由於網速的問題導致的，有些依賴甚至需要翻牆才能下載。最好的辦法就是把npm的下載源改成國內的鏡像，修改方法有三種，如下：

1.通過config命令
npm config set registry https://registry.npm.taobao.org
npm info underscore （如果上面配置正確這個命令會有字符串response）

2.命令行指定
npm --registry https://registry.npm.taobao.org info underscore

3.編輯~/.npmrc
加入下面內容
registry = https://registry.npm.taobao.org

修改完了，再執行npm install 下載完成就會有如下的提示:

Paste_Image.png

剩下的就是運行項目了。

開源項目彙總

https://github.com/liuhongjun719/react-native-DaidaiHelperNew 借貸助手
https://github.com/liuhongjun719/react-native-BabyHealth- 仿寶寶健康
https://github.com/nihgwu/react-native-sudoku 數獨
https://github.com/attentiveness/reading reading
https://github.com/CoderGLM/ReactNativeLeaning
https://github.com/eesc88/programmer 雲翻譯客戶端
https://github.com/jiangqqlmj/GaGaMall 嘎嘎商城
https://github.com/879479119/Bilibili-React-Native 仿B站客戶端
https://github.com/Shuijwan/marvel漫威電影客戶端
https://github.com/talentjiang/react_native_office公司移動OA辦公客戶端
https://github.com/yohnz/maoyanFilm仿貓眼電影客戶端
https://github.com/soliury/noder-react-nativeCNode論壇客戶端
https://github.com/Kennytian/LagouApp仿拉勾網客戶端
https://github.com/SFantasy/WeiboReactNativeiOS新浪微博客戶端
https://github.com/kailuo99/toutiaoiOS資訊頭條APP
https://github.com/xiekw2010/react-native-gitfeedGithub客戶端
https://github.com/iSimar/HackerNews-React-NativeHacker新聞客戶端
https://github.com/starzhy/TheOneCoder碼農客戶端
https://github.com/tabalt/ReactNativeNews新聞客戶端
https://github.com/vczero/React-Dou豆瓣搜索客戶端
https://github.com/race604/ZhiHuDaily-React-Native知乎日報客戶端