为了能让更多人感受 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. 给Java开发人员的Play Framework(2.4)介绍 Part1:Play的优缺点以及适用场景

    1. 关于这篇系列 这篇系列不是Play框架的Hello World,由于这样的文章网上已经有非常多. 这篇系列会首先结合实际代码介绍Play的特点以及适用场景.然后会有几篇文章介绍Play与Spri ...

  2. Unity5 BakeGI(Mixed Lighting)小记

    1.模型需勾选Generate Lightmap UVs,否则烘培图像撕裂. 2.关于为何新版的改叫Mixed Lighting,猜测是之前属于全部烘培,现在算是部分烘培,实时阴影和烘培阴影可以混用, ...

  3. ubuntu for win10 里运行apache+php

    一直想试试ubuntu for win10中运行网站测试一下,弄了好久,今天终于基本弄明白了, ubuntu for win10里的IP就是外面WIN10的IP,在里面建立网站了可以直接在外面WIN1 ...

  4. android 去掉标题栏、状态栏、横屏

    // 去掉标题栏 supportRequestWindowFeature(Window.FEATURE_NO_TITLE); // 全屏.隐藏状态栏 getWindow().setFlags(Wind ...

  5. [开源项目-MyBean轻量级配置框架] MyBean的特性和MyBean的开始

    [概述] 自从mBean框架出生后,受到很多朋友的关注,在公司的外包项目中得到了不错的应用.由于mBean是公司的项目,不便开源,于是这几天利用晚上的时间和周末的时间重写了底层beanMananger ...

  6. 阿里druid连接池监控配置

    首先在web.xml中添加如下配置: <filter> <filter-name>DruidWebStatFilter</filter-name> <filt ...

  7. Java的数组和list升序,降序,逆序函数Collections.sort和Arrays.sort的使用

    list升序,降序,逆序List<Integer>list =new ArrayList<Integer>();//如果list是 5 7 2 6 8 1 41.升序:Coll ...

  8. CISCO、H3C、华为三层交换机端口二三层切换命令对比

    很多人都在问H3C是否有像CISCO三层端口切换类似的命令 switchport . 答案是肯定的.有.很多人都不知道. 其实无论是思科还是H3C还是华为他们都有这样的命令.但是在H3C和华为中不经常 ...

  9. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...

  10. LeetCode: Maximum Subarray 解题报告

    Maximum Subarray Find the contiguous subarray within an array (containing at least one number) which ...