当前位置: 首页 > news >正文

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

  • 本文为 Marno 原创,转载必须保留出处!
  • 公众号【 aMarno 】,关注后回复 RN 加入交流群
  • React Native 优秀开源项目大全:www.marno.cn

一、面临问题

从某种程度上而言,目前为止 RN 只是给拥有 Mac 电脑的开发者提供了跨平台开发的能力, 因为现在还不能使用 Windows 创建 iOS 的 RN 应用。还有一个比较普遍的问题是,有一些 iOS 程序员不会配置 Android 的编译环境,而一些 Android 程序员又搞不懂 XCode,至于其他没接触过移动开发的人来说,就更恼火了。有些人可能本来也只是想体验一下,结果觉得配环境这么麻烦就直接放弃了。

所以为了能让更多人感受 RN 的魅力,早在几个月前 react-community 就给出了一个不错的解决方案,可以让一个完全没接触过 RN 的人,从配环境开始5分钟实现 Hello Wolrd 的编写(就是这么快)。而且在前几天刚结束的 React Conf 2017 大会上也提到了这个,通过这个方案我们可以实现:

  • 不用再去配置烦人的 iOS、Android 编译环境
  • 可以用 Windows 开发 iOS 版的 RN 应用。

二、解决方案

解决这个问题需要借助两个工具:1. create-react-native-app(下文简称CRNA); 2. Expo(原名Exponent)

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

下面就正式开始介绍一下这两个工具的使用,使用 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 MarnoRN
$ cd my-app/
$ npm start复制代码

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

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

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

$ npm i -g exp
$ exp publish复制代码

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

但是如果最终你要打包 App 发布到应用市场,那还是需要有 iOS 和 Android 编译环境,要只是用来体验一下,或者用于 RN 的学习,那这种方式应该是可以解决你的问题了,可以让你更专注的进行学习 ,而不会因为觉得安装编译环境繁琐就放弃了。当然 CRNA 还有一些其他功能,大家可以自行到 github 看原文文档。如果在使用过程中有什么问题,可以直接给作者提 issue 哈。

这个只是 React Conf 2017 大会上一个比较短的内容,大会还介绍了一些其他的东西,比如 Mobx 和 Redux 的对比、 React VR 的使用、最新版 nuclide 的使用(感觉比之前好用了)等等,满满 2 天的会议,Youtube 上有 35 个相关的视频,我上周末看了差不多有一半了,受益不少。如果感兴趣的可以自行去观看,视频地址在这里:t.cn/RiFxmB7 请自备梯子,或者在我公众号回复 v p n 用我推荐的这个梯子也行。我经常到 youtube 看视频就用这个,看 1080p 也不怎么卡,哈哈~不过前提是你的网速要好!

相关文章:

  • 算法(Algorithms)第4版 练习 2.3.25
  • Matlab中imnoise函数的用法
  • docker 配置缓存代理服务apt-cacher-ng
  • TCP状态统计 - 脚本命令
  • Flask的Jinja2模板引擎 - 全局函数
  • 二叉树性质
  • Win10系列:C#应用控件基础2
  • Ubuntu下搭建tftp服务器最简单方法
  • PHP基础笔记【2】字符串操作
  • 深入分析Java单例模式的各种方案
  • 左手书法二十七篇
  • Flink - NetworkEnvironment
  • 修改Jmeter配置使能支持更大并发
  • 关于grep正则表达式-1
  • web前端性能优化总结
  • Asm.js的简单介绍
  • CAP 一致性协议及应用解析
  • Cumulo 的 ClojureScript 模块已经成型
  • ES6之路之模块详解
  • iOS小技巧之UIImagePickerController实现头像选择
  • leetcode46 Permutation 排列组合
  • Python socket服务器端、客户端传送信息
  • QQ浏览器x5内核的兼容性问题
  • unity如何实现一个固定宽度的orthagraphic相机
  • Vue官网教程学习过程中值得记录的一些事情
  • Vue实战(四)登录/注册页的实现
  • 规范化安全开发 KOA 手脚架
  • 手写双向链表LinkedList的几个常用功能
  • 线上 python http server profile 实践
  • 用Visual Studio开发以太坊智能合约
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • LIGO、Virgo第三轮探测告捷,同时探测到一对黑洞合并产生的引力波事件 ...
  • 正则表达式-基础知识Review
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • #HarmonyOS:基础语法
  • #stm32驱动外设模块总结w5500模块
  • #微信小程序:微信小程序常见的配置传旨
  • (12)目标检测_SSD基于pytorch搭建代码
  • (3)(3.5) 遥测无线电区域条例
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (阿里云万网)-域名注册购买实名流程
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (六)c52学习之旅-独立按键
  • (牛客腾讯思维编程题)编码编码分组打印下标题目分析
  • (强烈推荐)移动端音视频从零到上手(上)
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .NET CORE 第一节 创建基本的 asp.net core
  • .net 获取url的方法