React Native開源項目如何運行？

學習任何技術，最快捷的方法就是學習完基礎語法，然後模仿開源項目進行學習，React Native也不例外。React Native推出了1年多了， 開源項目太多了，我們以其中一個舉例子.給大家演示下如何運行開源項目.(前提是你已經搭建好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相關知識。

安裝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 下載完成就會有如下的提示:

剩下的就是運行項目了。

下面在匯總了一些開源項目

開源項目匯總

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知乎日報客戶端