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知乎日报客户端

时间: 2024-10-26 17:55:14

React Native开源项目如何运行(附一波开源项目)的相关文章

使用 React Native 一年后的感受

当我在面试Discord的时候,技术主管Stanislav跟我说: React Native代表着未来.等它一发布,我们就会用它从零构建iOS应用. 作为一名原生iOS开发者,基于先前使用PhoneGap的经验,我非常怀疑使用Web技术构建移动应用的这种方式.但是当我学习并使用React Native一段时间之后,我非常庆幸我们做了这个决定. 开发效率 虽然iOS"团队"只有我自己一个人,但是iOS应用开发依然可以赶上Web和桌面应用开发闪电般的速度.Apple公司已经允许开发者使用J

React Native——一次学习,随处编写

2015年3月26日,Facebook公司对外正式发布了React Native--使用React框架跨平台开发原生移动应用的开源技术框架.开发者可以使用React Native高效地开发运行于Android与iOS操作系统的应用程序.它的设计理念是:使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率. React框架不追求所谓的"一次编写,随处运行(Writeonce, run anywhere.)".React认为不同的平台应该有

如何用 React Native 创建一个iOS APP?

诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上--开发者只需学习一种语言就

《React Native移动开发实战》一一1.4 第一个React Native应用

1.4 第一个React Native应用 颇费一番周折搭建好环境之后,终于可以长舒一口气,来开发第一个React Native应用了.1.4.1 初始化项目 首先,使用React Native命令行工具来初始化一个新的项目: react-native init ch02 等待工程创建成功并安装好所有依赖后,使用Atom打开ch02项目,来仔细瞧一瞧React Native项目结构,如图1.21所示. 图1.21 React Native项目结构 其中目录和文件的详细说明如表1.1所示. 回答:

React Native Android 应用内存使用探究

本文讲的是React Native Android 应用内存使用探究, 为什么我那台老旧的 Android 手机无法加载图片? 刚开始接触 React Native 应用时,我发现有个现象很奇怪,在 Android 手机上我无法看到任何图片,只有颜色和文字可以显示.但 iOS 手机却没有任何问题. 我以为是我新找来测试 React Native 工程的 Android 手机有问题.我甚至被这错误的想法牵着刷了 rom (基于 AOSP 5.1.1 的系统)来在更高的 Android 版本上运行

H5、React Native、Native应用对比分析

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移动市场的迅速崛起强调团队快速响应和迭代:三则是用户的体验被放大,用户要求极致的快感,除非你牛x(例如:12306最近修改手机号需要用户自己发短信接收验证码).

微软发招,苹果发飙,React Native 躺枪

这两天苹果和微软互怼,用脚本热更新的朋友要谨慎过iOS审核. 早上有Q群里面在讨论最近用JavaScript做为脚本层,在苹果商店审核遭拒的情况. 从目前多数信息来看,cocos2d-js和creator这样用SpiderMonkey + JSB技术栈的游戏情况尚好,但是用facebook React-Native技术的无一例外躺枪了.用jspatch开源库的也很多兄弟阵亡. 就在今天早上,Facebook的React-Native github仓库里有这么一条issue:https://git

xamarin创建项目无法运行

问题描述 xamarin创建项目无法运行 新建了一个新项目都不能运行,报错,之前是好的. 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 "GetAdditionalResourcesFromAssemblies"任务的声明或使用不正确,或在构造过程中失败.请检查任务名称和程序集名称的拼写是否正确. App1 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 未能从"C:Program Files (x86)MSBuildXamarinAndroidXamari

三步将 React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问.这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而且平台差异性是注定存在而且也要保留的,所以 React Native 的目标是 Learn once, write anywhere,而不