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-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知乎日报客户端
React Native开源项目如何运行(附一波开源项目)的更多相关文章
- 配置React Native环境及解决运行异常
一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默 ...
- react native 在vscode上运行
1.在用react-native init xxx 创建rn项目之后,在Android目录中创建local.properties文件 =后面接上sdk地址 2.react-native start 命 ...
- 关于react native在window下运行安卓的时候报 could not connect to development server
当出现这种问题是网上的解答方案都是一模一样的! 我这边先给个地址讲的是解决方案http://blog.csdn.net/qq_25827845/article/details/52974991 但是我 ...
- React Native开源项目如何运行(转载)
学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...
- React Native开源项目案例
(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...
- React Native 开源项目汇总
最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- React Native开发之IDE(Atom+Nuclide)安装,运行,调试
版权声明:本文为博主原创文章,如需转载请注明出处 目录(?)[-] 前言 MacWindowsLinux 准备工作 安装Atom 安装Nuclide 新建一个工程 自动补全 类型标注 语法检查 跳 ...
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
随机推荐
- [Array]268. Missing Number
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- PHP实现git部署的方法,可以学学!
https://mp.weixin.qq.com/s/QFpKu8oKoxOEA1BmT7pNhg 在小站点上,直接用git来部署php代码相当方便,你的远程站点以及本地版本库都有一个版本控制,追 ...
- 弹性盒布局(flex)
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
- 使用springMvc对象属性自动封装从jsp向controller传值
controller通过ModelAndView向前台传传递信息 jsp也可以通过model向controller传递信息 这只是其中的一个办法,还有其他几种方式进行前后端的数据交互 如何才能让spr ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...
- Django高级实战 开发企业级问答网站
Django高级实战 开发企业级问答网站 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...
- mysql连接出现Unknown system variable 'tx_isolation'异常
出现这个异常,是因为mysql-connector-java.jar的版本太低,数据库的版本太高,不匹配导致的. 因此将mysql-connector-java升级到最新版本就解决了问题. 最新的三个 ...
- Quick BI取数模型深度剖析
开发图表最关键的点在于选择准确的图表类型展示准确的数据,而准确的数据往往依赖于一个强大的取数模型,因此设计一个好的取数模型不仅可以解决数据安全的问题,更可以帮助每个访问者高效触达自己想要的数据,开发者 ...
- Django基础内容整理
- 从0开始学习 GitHub 系列之「06.团队合作利器 Branch」
Git 相比于 SVN 最强大的一个地方就在于「分支」,Git 的分支操作简直不要太方便,而实际项目开发中团队合作最依赖的莫过于分支了,关于分支前面的系列也提到过,但是本篇会详细讲述什么是分支.分支的 ...