CRNA的使用

为了能让更多人感受 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/

时间: 2024-07-29 04:27:47

CRNA的使用的相关文章

Creat-React-Native-App 之StackNavigator之踩坑记录

Creat-React-Native-App简称CRNA. 在我开始入门RN时fb已经推出和Expo联合开发用于快速创建React Native应用的工具: Create-React-Native-App.以下是在CRNA开发起步时导航器跳转页面遇到的问题记录. 参考资料:React Native中文网 React Navigation 根据教程指导,写了最简单的导航条调用示例: import React from 'react'; import { StyleSheet, Text, Butt

CultureInfo提供有关特定区域性的信息,包括区域性的名称、语言、简称、书写系统、使用的日历以及对日期和排序字符串的格式化字符串设置。

CultureInfo类里包括区域性标识.区域性名称.语言代码(三字母).RFC 4646 标准标识.本地化区域性名称及英文名称等等信息.里面每一个区域信息里, 1.DateTimeFormatInfo类介绍的时间格式化字符串.星期.月份.长格式.短格式: 2.NumberFormat类介绍数字.货币的正负.百分比符号.正负无穷大等等: 3.TextInfo类介绍书写方向.区域标识符.分隔字符串等等: 语言 英文名称 区域名称 LCID 本地名称 语言简称 货币符号 阿拉伯语          

更快速的 React Native 快速入门

版权声明:本文为Marno原创,首发公众号 aMarno ,转载必须在明确位置注明出处! 本文为 Marno 原创,转载必须保留出处! 公众号 aMarno,关注后回复 RN 加入交流群 简书专题< React-Native 开发阵营 >,欢迎关注和投稿 React Native 优秀开源项目大全:https://github.com/MarnoDev/react-native-open-project 一.面临问题 从某种程度上而言,目前为止 RN 只是给拥有 Mac 电脑的开发者提供了跨平

国际化多语言(本地化)缩写 NLS API

NLS Information for Windows 7 LCID Culture Identifier Culture Name Locale Language Country/Region Language Local language name ANSI codepage OEM codepage Country or Region name abbreviation* Language name abbreviation** 0x0036 af Afrikaans Afrikaans

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

基本的R包已经实现了传统多元统计的很多功能,然而CRNA的许多其它包提供了更深入的多元统计方法,下面要综述的包主要分为以下几个部分: 1) 多元数据可视化(Visualising multivariate data): 绘图方法: 基本画图函数(如:pairs().coplot())和lattice包里的画图函数(xyplot().splom())可以画成对列表的二维散点图,3维密度图.car包里的scatterplot.matrix()函数提供更强大的二维散点图的画法.cwhmisc包集合里的

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

首先自我介绍一下,本人鸟窝,现在就职于xx共享汽车,担任主程,目前用的技术栈是.net core+angular. 今天我讲的是关于ReactNative从零基础开发,希望可以对入门的新手,起到一个指导作用. 目前学习React Native跨平台开发的人员比较多,干ReactNative开发的程序员,转行过来的也比较多,之前就有遇到过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java...PHP),发现一个很有趣的现象,我公司同事干PHP的,一次偶然,我发现他尽然学起

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

ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 上一篇教程我们一步步配置了开发RN的必备环境,这篇文章我们依然配置环境,昨天配置的是CRNA模式开发的环境,我们今天配置原生混合开发环境. 第一次写系列教程,写的不好,多多担待,有错误欢迎评判指正. 说一下这个系列教程的目标吧,实战一个CRNA模式开发的跨平台App打包并发布,并将这个App用原生混合开模式实现并打包发布. 废话不多说开始撸码,你准备好了吗? 环境配置 配置原生混合模式开发的环

带你从零学ReactNative开发跨平台App开发(三)

经过上两篇文章的讲解,已经基本搭建起来基础环境,接下来就要真是开发了,这边文章,我想先普及一下CRNA(create-react-native-app xx)的知识,因为有不少人问过我expo方面的东西,所以实战时候第一个项目使用CRNA方式创建,然后再将其转化为原生混合模式开发 .声明,本人打算app开发中的所有接口api,由我自己来实现,并上传服务器,届时大家可以一起调用,当然实战项目肯定是会上传到github的.废话不多说,开始撸码,你准备好了吗? 介绍一款新武器-xde 采用crna模式