原文地址:http://www.lxweimin.com/p/240d5ab43a48
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相關知識 。 七天學會 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/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-gitfeed Github客戶端
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 知乎日報客戶端