学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,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下载对应的依赖。
但是问题来了, 经常会出现下面的错误:

 
错误

大部分都是由于网速的问题导致的,有些依赖甚至需要FQ才能下载。最好的办法就是把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

剩下的就是运行项目了。

React Native开源项目如何运行(转载)的更多相关文章

  1. React Native开源项目如何运行(附一波开源项目)

    学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...

  2. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  3. React Native 开源项目汇总

    最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...

  4. 什么是 Native、Web App、Hybrid、React Native 和 Weex?(转载)

    什么是 Native.Web App.Hybrid.React Native 和 Weex?   来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句 ...

  5. React Native(ios)项目中logo,启动屏设置

    由于logo和启动屏尺寸多,react native(ios)中没有命令可以自动生成各种的尺寸,所以可以使用以下办法:在ionic项目中生成(使用命令:ionic resources)后,再粘贴到re ...

  6. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  7. 配置React Native环境及解决运行异常

    一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默 ...

  8. React Native初始化项目后执行react-native run-ios,构建失败

    今天是肿么了......一上班创建React Native项目,react-native run-ios运行就报错,运行不了...呜呜...... 一开始以为自己react-native run-io ...

  9. Android开源项目分类汇总-转载

    太长了,还是转载吧...今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源项目分类汇总,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参 ...

随机推荐

  1. LayaBox IDE 安装后执行项目报错解决方案的一些记录

    1.打开IDE后出现“路径xxx未指向有效地tsserver安装.将禁用TypeScript语言功能.”提示: 这是由于杀毒软件吧ts对应的js文件作为病毒删除导致的,一般到杀毒软件的历史界面中将ts ...

  2. conflicting types for xx错误

    编译libvmi 0.8版本时,出现以下错误: libtool: compile:  gcc -DHAVE_CONFIG_H -I. -I.. -I.. -fvisibility=hidden -I/ ...

  3. C#读取CSV

    public class CSVFileHelper { /// <summary> /// 将DataTable中数据写入到CSV文件中 /// </summary> /// ...

  4. Clustered Shading架构实现步骤

    最终决定越过Forward+,一步到位,直接调整至更先进的Clustered架构.步骤如下: 里程碑1:以CPU方式实现Light Culling,旨在理念验证,并与D3D10兼容里程碑2:以GPU ...

  5. TCP中的KeepAlive与HTTP中的Keep-Alive

    KeepAlive 与 Keep-Alive 前言 昨天被问到了HTTP中Keep-Alive的概念,看名字我只知道是保持连接用的,但是对于他怎么结束连接,为什么要用他这些就不是很清楚了,今天查了一下 ...

  6. JPA 不生成外键

    在用jpa这种orm框架时,有时我们实体对象存在关联关系,但实际的业务场景可能不需要用jpa来控制数据库创建数据表之间的关联约束,这时我们就需要消除掉数据库表与表之间的外键关联.但jpa在处理建立外键 ...

  7. springboot logback 集成

    在 application.yml 中敲 logging.pattern.consle ,IDEA 会联想到对应的值.单击属性就可以跳到 LoggingApplicationListener.java ...

  8. ThinkingInJava 学习 之 0000003 控制执行流程

    1. if-else 2. 迭代 1. while 2. do-while 3. for 4. 逗号操作符 Java里唯一用到逗号操作符的地方就是for循环的控制表达式. 在控制表达式的初始化和步进控 ...

  9. Excel 保护工作表

    1.选取整张表格,格式--设置单元格格式--锁定状态 2.将用户可编辑区域解锁 3.在审阅--保护工资表,设置除第一行不选,其他全选,添加密码保护,确定

  10. mkvirtualenv command not found解决

    在京东云上用户家目录下创建.virtualenvs后,创建python虚拟环境,使用mkvirtualenv命令,没有提示,输完回车报下面错误,mkvirtualenv command not fou ...