为了能让更多人感受 RN 的魅力,早在几个月前 React-community 就给出了一个不错的解决方案,可以让一个完全没接触过 RN 的人,从配环境开始5分钟实现 Hello Wolrd 的编写(就是这么快)。

借助两个工具:1. create-react-native-app(下文简称CRNA); 2. Expo(原名Exponent)

第一个是电脑上用来创建 RN 应用的工具,第二个是手机上安装的应用(Android、iOS 都有)。iOS 到 AppStore 搜 Expo 进行下载, Android 到 google play 下载,或者到 APKPure 下载,具体可以百度下。Expo 同时还提供了一个 XDE 的开发工具用来做 RN 开发,体验了一下感觉不是很好用。如果感兴趣可以到官网下载体验(官网地址:https://docs.expo.io/versions/v15.0.0/index.html )。

下面就正式开始介绍一下这两个工具的使用,使用 CRNA 创建 RN 应用只是不用安装 iOS 和 Android 的编译环境了,但是 node 还是必须的,然后通过下面的 node 命令安装 CRNA 这个工具。

npm install -g create-react-native-app

  安装好之后就不再使用 react-native init XXX 的命令来新建应用了,直接使用下面的命令进行创建并启动。使用 CRNA 创建的项目,你在文件夹里看不到 iOS 和 Android 工程目录,它只包含了 JS 部分的代码。

create-react-native-app myapp
$ cd my-app
$ npm start

  正常情况下,我们通过 npm start 启动该应用后,会生成一个二维码。这样的操作方式就感觉和微信小程序有些类似了。

接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。并且只要在 Expo 中打开过一次,就会在 App 中保留一个入口。

使用 Expo 我们可以很快速的将自己的 RN 应用和别人分享,只要把二维码或者应用链接发给别人就行,不过前提是别人也同样安装了 Expo 。我们也可以把自己的 App 上传到 Expo 中,让更多的人搜索就可以使用。上传操作命令如下:

npm install -g exp
exp publish

  通过 CRNA 这样的方式,不仅完全跳过了配置 Android 和 iOS 编译环境的步骤;还突破了硬件的限制,不管你的电脑是 windows 还是 mac ,也不用管你的手机是 iPhone 还是 Android,都可以进行所有平台的代码编写和真机测试 。并且在 Expo 中还可以搜索别人上传的应用(恩!感觉这套路和小程序是一样样的)。

但是如果最终你要打包 App 发布到应用市场,那还是需要有 iOS 和 Android 编译环境,这时候运行如下命令为该项目添加Android和ios相关文件夹。

npm run eject

Eject 将所有的工具(配置文件和 package.json 依赖库)解压到应用所在的路径.

另外,推荐一款可以在线编辑代码即可在移动端看到效果的工具:

https://sketch.expo.io/

CRNA的使用的更多相关文章

  1. windows平台 culture name 详细列表

    点击打开链接http://msdn.microsoft.com/zh-cn/goglobal/bb896001.aspx LCID Culture Identifier Culture Name Lo ...

  2. R语言︱常用统计方法包+机器学习包(名称、简介)

    一.一些函数包大汇总 转载于:http://www.dataguru.cn/thread-116761-1-1.html 时间上有点过期,下面的资料供大家参考基本的R包已经实现了传统多元统计的很多功能 ...

  3. NodeJS笔记(五) 使用React Native 创建第一个 Android APP

    参考:原文地址 几个月前官方推出了快速创建工具包,由于对React Native不熟悉这里直接使用这2个工具包进行创建 1. create-react-native-app(下文简称CRNA): 2. ...

  4. taro之React Native 端开发研究

    初步结论:如果想把 React Native 集成到现有的原生项目中,不能使用taro的React Native 端开发功能(目前来说不能实现,以后再观察).   RN开发有2种模式: 1.一是原生A ...

  5. Expo大作战(九)--expo的工作原理,以及版本发行说明

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,将全部来与官网 我猜去全部机翻+个人 ...

  6. 带你从零学ReactNative开发跨平台App开发(二)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  7. 带你从零学ReactNative开发跨平台App开发(一)

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  8. ML—R常用多元统计分析包(持续更新中……)

    基本的R包已经实现了传统多元统计的很多功能,然而CRNA的许多其它包提供了更深入的多元统计方法,下面要综述的包主要分为以下几个部分: 1) 多元数据可视化(Visualising multivaria ...

  9. [RN] 01 - Init: Try a little bit of React Native

    Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...

随机推荐

  1. php分享二十二:php面向对象

    1:static访问符 在类中使用static有两种主要用途.定义静态成员和定义静态方法.静态成员只保留一个变量的值,这个值对所有实例都是有效的 类的方法是static的,他所访问的属性也必须是sta ...

  2. 用bundler安装jeklly

    为什么要写这篇文章呢?因为官方的安装文档里,ruby的很多库没有说明怎么安装.所以需要重点说明一下.1.我的安装环境是vultr的16.04版的ubuntu.2.因为ruby的扩展库好多都是Gcc编译 ...

  3. [nginx]盗链和防盗链场景模拟实现

    盗链环境模拟 http://www.daolian.com/index.html 这个页面盗用http://www.maotai.com/qq.jpg这个站点页面的图. <!doctype ht ...

  4. Vuex 入门指南

    1.Vuex是什么? 我们还是像以往一样先看一看官方文档对此的解读(Vuex 是什么? · GitBook) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的 ...

  5. VS2015 调试中断点突然失效的解决办法、VS调试时关闭调试让浏览器继续保留页面

    VS2010 调试中断点突然失效的解决办法 问题描述:在调试前加了断点,但debug时红色的断点变成透明的圆圈加一个感叹号,执行到该处时也不会停止. 这个问题遇到过几次了,前几次都没怎么注意,有时候是 ...

  6. [Windows Azure] How to use the Windows Azure Blob Storage Service in .NET

    How to use the Windows Azure Blob Storage Service in .NET version 1.7 version 2.0 This guide will de ...

  7. localtime 和 localtime_r

    #include <cstdlib> #include <iostream> #include <time.h> #include <stdio.h> ...

  8. mysql++ result

    在介绍Result之前,先熟悉几个类 Field  用来存储SQL字段信息,主要是关于表字段列属性的判断和获取 class Field { public: ...................... ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  10. IntelliJ IDEA 14.1.4导入项目启动报错:Error during artifact deployment.[组件部署期间出错]

    1.问题描述:Error during artifact deployment.[组件部署期间出错] 2.删除Artifacts 3.刷新 4.重新生成Artifacts 5.重新选择 再重新启动项目 ...