快速创建React Native App

标签: react-native 跨平台开发 动态更新 教程
3681人阅读 评论(1) 收藏 举报
分类:

尊重版权,未经授权不得转载
本文出自:贾鹏辉的技术博客http://blog.csdn.net/fengyuzhengfan/article/details/75042786

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

快速创建React Native App

查看最新的React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页。Quick Start是在v0.4.5版本添加的一种快速创建React Native App的方案,旨在为React Native开发者提供一种快捷的,无需配置任何工具,同时也无需安装XCode与AndroidStudio就可以开发React Native App的一种方案。

本文向大家分享如何快速构建React Native App以及在使用快速构建方案中可能存在的一些问题及解决方案。

第一步:安装create-react-native-app

create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建RN App的一个开源项目。

作为一个创建react native应用的脚手架工具,你可以通过如下命令完成安装:

npm install -g create-react-native-app

接下来就可以通过create-react-native-app来创建APP了:

create-react-native-app aa
cd aa
npm start

npm-start.png

上述命令,会为你创建一个aa的RN项目。

create-react-native-app常用命令

  npm start
    启动本地开发服务器,这样一来你就可以通过Expo扫码将APP运行起来了。

  npm run ios
    将APP运行在iOS设备上,仅仅Mac系统支持,且需要安装Xcode。

  npm run android
    将APP运行在Android设备上,需要Android构建工具。

  npm test
    运行测试用例。

运行React Native应用

想要将上述创建的aa运行起来,你需要下载安装Exponent

为了方便大家下载使用,我已将Exponent上传到网盘,供大家下载使用。

然后用Expo扫码屏幕上的二维码,aa就可以运行在Expo上了。

运行效果

提示:为了确保Expo App能够正常访问到你的PC,你需要确保你的手机和PC处于同一网段内或者他们能够联通。

编辑App

经过上述的步骤,快速开发React Native App的环境就已经搭建好了,小伙伴门是不是迫不及待的想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来在Expo上查看运行效果哦。

可能存在的问题及解决方案

ERROR: npm 5 is not supported yet

error-npm5-is-not-support-yet

问题分析:
在通过create-react-native-app命令创建一个React Native项目的时候,出现这个问题的原因是npm 5的一个bug所致@npm@5 known issue tracking

解决方法

将npm5降级到npm4,终端运行如下代码:

npm i npm@4 -g

然后在重新运行create-react-native-app即可。

如果大家对快速创建React Native App还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

推荐学习:视频教程《React Native开发跨平台GitHub App》

查看评论

利用 Create React Native App 快速创建 React Native 应用

本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错。笔者目前公司是采用 APICloud 进行移动应用开发...
  • hsany330
  • hsany330
  • 2017-04-24 17:28:24
  • 1177

通过creact-react-native-app构建项目遇到的坑

最近公司要使用RN开发APP项目,我从一个后端人员变成了一个前端踩雷的。这两天看了很多的网上介绍,发现FB新出的CRNA感觉很牛逼,是一个新的沙盒系统,能够将项目自动编译成IOS或者Android的包...
  • cy22201222
  • cy22201222
  • 2017-09-07 11:18:43
  • 1322

《React Native高效开发》之 create-react-native-app

【公众号 aMarno 】从某种程度上而言,目前为止 RN 只是给拥有 Mac 电脑的开发者提供了跨平台开发的能力, 因为现在还不能使用 Windows 创建 iOS 的 RN 应用。还有一个比较普遍...
  • Marno__
  • Marno__
  • 2017-03-27 21:22:37
  • 1755

npm 5 package-lock.json 坑坑坑!!

前几天升级了 Node.js v8.0 后,自带的 npm 也升级到了5.0,第一次使用的时候确实惊艳到了:原本重新安装一次模块要十几秒到事情,现在一秒多就搞定了。先不要激动,现在我来大概讲一下 np...
  • aaa333qwe
  • aaa333qwe
  • 2017-09-18 17:36:26
  • 11689

React Native App

XFood这是我业余时间,自学RN时写的一个app先看下效果图:同时能运行在android跟ios设备,开发起来也很快,主要用到的知识有: 自定义Button,titleBar,属性传值 界面跳转Na...
  • imSunLight
  • imSunLight
  • 2017-02-07 10:03:43
  • 440

详细讲解如何在windows下搭建react-native的开发环境(包括在设备上安装和运行react-native app )!

(前言) 作为一名大四狗和前端菜鸟,刚来公司实习的第一天老大就安排了我准备用react-native进行移动端的开发其实我对react-native这新玩意懂得不多,只知道它很强大,可以实现跨平台运行...
  • raoJinwei
  • raoJinwei
  • 2017-04-19 10:40:06
  • 6376

React Native开发一 webstorm搭建React Native开发环境

1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。最后开始打算从RN开始学起。废话不多说,开...
  • qiyei2009
  • qiyei2009
  • 2017-12-16 17:50:29
  • 3641

《React Native高效开发》之 template

公众号【aMarno】来龙去脉在今年2月10日的时候,有人在 github 给 Facebook 提了一个建议,希望可以提供类似 Cordova 中模板的功能,具体地址在这里:【戳我去围观】。Face...
  • Marno__
  • Marno__
  • 2017-03-31 00:18:28
  • 1388

从零开始,为Android创建一个最简单的React Native Module

关于如何桥接native code,React Native的官网并没有多少篇幅介绍。通过Google和StackOverflow,收集了一些资料。这里分享下如何为Android写一个最简单,最干净的...
  • yushulx
  • yushulx
  • 2017-04-18 14:15:21
  • 728

如何创建第一个React Native android应用

Facebook开源的react native(RN)最近可谓风头正劲,受到许多开发者的关注,其中不乏敢于尝试(zizuozishou)的小伙决定使用react native来开发app。但是,rea...
  • naiba01
  • naiba01
  • 2016-05-16 22:30:14
  • 2821
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 107万+
    积分: 1万+
    排名: 1389
    你需要的,才是干货@开源项目
    博客专栏
    最新评论