原文地址:http://www.reibang.com/p/240d5ab43a48
React Native開源項目如何運行(附一波開源項目)
學(xué)習(xí)任何技術(shù)大刊,最快捷的方法就是學(xué)習(xí)完基礎(chǔ)語法几缭,然后模仿開源項目進行學(xué)習(xí)赐纱,React Native也不例外掺涛。React Native推出了1年多了型奥, 開源項目太多了恼蓬,我們以其中一個舉例子.給大家演示下如何運行開源項目.(前提是你已經(jīng)搭建好React Native環(huán)境了)
下載開源項目
首先需要找到開源項目 ,比如下面這個.
地址: https://github.com/Bob1993/react-native-gank
進入github, clone到本地或者直接download到本地蟆炊。
按照之前運行自己項目的經(jīng)驗,我們會直接在控制臺進入項目目錄膜蛔,然后輸入
react-native run-ios 或者react-native run-android
這時候發(fā)現(xiàn)并沒有react-native 指令.
原因是這樣的, 大部分開源項目并不是完整的項目, 缺少了項目的依賴, 就像我們運行java沒有jdk環(huán)境一樣坛猪。
下面是一個完整的項目:
而開源項目為了減少空間,并沒有提交node_mudules目錄皂股,需要我們自己安裝
npm安裝node_modules
node_modules 是整個項目的依賴墅茉, 里面包含什么呢? 包含的文件全部都寫在package.json 文件中了。 這個文件是必不可少的就斤。我們需要按照這個列表下載悍募。
這時候需要給大家簡單介紹下,因為react native項目是通過nodejs構(gòu)建的洋机,所以在nodejs項目中都需要package.json 文件坠宴。具體大家可以看看nodejs相關(guān)知識 。 七天學(xué)會 Nodejs
安裝node_modules 非常簡單绷旗, 進入項目目錄執(zhí)行命令
npm install
會自動按照package.json下載對應(yīng)的依賴喜鼓。
但是問題來了, 經(jīng)常會出現(xiàn)下面的錯誤:
錯誤
大部分都是由于網(wǎng)速的問題導(dǎo)致的衔肢,有些依賴甚至需要翻墻才能下載庄岖。最好的辦法就是把npm的下載源改成國內(nèi)的鏡像,修改方法有三種角骤,如下:
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
加入下面內(nèi)容
registry = https://registry.npm.taobao.org
修改完了隅忿,再執(zhí)行npm install 下載完成就會有如下的提示:
剩下的就是運行項目了。
開源項目匯總
https://github.com/nihgwu/react-native-sudoku 數(shù)獨
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 仿拉勾網(wǎng)客戶端
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 碼農(nóng)客戶端
https://github.com/tabalt/ReactNativeNews 新聞客戶端
https://github.com/vczero/React-Dou 豆瓣搜索客戶端
https://github.com/race604/ZhiHuDaily-React-Native 知乎日報客戶端