利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错。笔者目前公司是采用 APICloud 进行移动应用开发(人少 + 应用要求低),不过确实也有很多的性能瓶颈;今天笔者还特地邮件问了 Expo Support 有关添加微信、百度地图等成为官方预置库的计划,得到的回复是可能两三个月内会先将微信集成进来,很期待未来 Expo 在国内的发展。
利用 Create React Native App 快速创建 React Native 应用
Create React Native App 是由 Facebook 与 Expo 联合开发的用于快速创建 React Native 应用的工具,其深受我们在前文介绍的 Create React App 的影响。 很多没有移动端开发经验的 Web 开发者在初次尝试 React Native 应用开发时可能会困扰于大量的原生依赖与开发环境,特别对于 Android 开发者而言。而 Create React Native App 则能够让用户在未安装 Xcode 或者 Android Studio 时,即使是在 Linux 或者 Windows 环境下也能开始 React Native 的开发与调试。这一点主要基于我们可以选择将应用运行在 Expo 的客户端应用内,该应用能够加载远端的纯粹的 JavaScript 代码而不用进行任何的原生代码编译操作。我们可以使用 NPM 快速安装命令行工具:
$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start
命令行中会输出如下界面,我们可以在 Expo 移动端应用中扫描二维码,即可以开始远程调试:

我们也可以选择使用 Expo 的桌面端辅助开发工具 XDE ,其内置了命令行工具与发布工具,同时支持使用内部模拟器:

除此之外,Expo 还提供了 Sketch 这个在线编辑器,提供了组件拖拽、内建的 ESLint 等功能,允许开发者直接在网页中进行快速开发与共享,然后通过二维码在应用内预览。

Expo 支持标准的 React Native 组件,目前已经内置了相机、视频、通讯录等等常用的系统 API,并且预置了 Airbnb react-native-maps、 Facebook authentication 等优秀的工具库,未来也在逐步将常用的微信、百度地图等依赖作为预置纳入到 SDK 中。我们也可以使用 npm run eject 来将其恢复为类似于 react-native init 创建的包含原生代码的初始化项目,这样我们就能够自由地添加原生模块。我们也可以使用 Expo 提供的 exp 命令行将项目编译为独立可发布的应用。我们需要使用 npm install -g exp 安装命令行工具,然后配置 exp.json 文件:
{
name: "Playground",
icon: "https://s3.amazonaws.com/exp-us-standard/rnplay/app-icon.png",
version: "2.0.0",
slug: "rnplay",
sdkVersion: "8.0.0",
ios: {
bundleIdentifier: "org.rnplay.exp",
},
android: {
package: "org.rnplay.exp",
}
}
配置完毕之后在应用目录内使用 exp start 命令来启动 Expo 打包工具,然后选择使用 exp build:android 或者 exp build:ios 分别构建 Android 或者 iOS 独立应用。
利用 Create React Native App 快速创建 React Native 应用的更多相关文章
- 利用sublime的snippet功能快速创建代码段
在前端开发中我们经常会输入相同的一些基本代码,例如常用的jquery引用,bootstrap框架,cssreset等等,如果每次使用时在复制粘贴感觉很麻烦,这里介绍一种更为简洁的方法 利用sublim ...
- webStrom快捷键快速创建React组件
1. rcc + tab键 - - 用ES6模块系统创建一个React组件类 2. rccp + tab键 - - 创建一个带有PropTypes和ES6模块系统的React组件类 3. rcfc + ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- 使用脚手架快速搭建React项目
create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...
- WebApp与Native App有何区别
转:http://blog.sina.com.cn/s/blog_5f2df1e401018hjj.html 今天看的一篇关于html5的Web App与Native App的技术分析,真的很棒分享一 ...
- 详解WebApp与Native App的区别
一篇真的很棒关于html5的Web App与Native App的技术分析 ! 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于 ...
- React Native APP结构探索
APP结构探索 我在Github上找到了一个有登陆界面,能从网上获取新闻信息的开源APP,想来研究一下APP的结构. 附上原网址:我的第一个React Native App 具体来讲,就是研究一个复杂 ...
- 使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html ⒉安装React Native官方的脚手架工具 npm i ...
- 从零学React Native之01创建第一个程序
本篇首发于简书 欢迎关注 上一篇文章是时候了解React Native了介绍了React Native.大家应该对React Native有个初步的认识. 接下来我们就可以初始化一个React Nat ...
随机推荐
- Struct2小结:
Action小结: 实现一个Action的最常用的方式:从ActionSupport继承: DMI动态方法调用,减少配置内容: 通配符 *_* ({1},{2})的使用更方便: 接收参数的方法(一般用 ...
- boost pool 和 object_pool
内存池(Memory Pool)是一种内存分配方式. 通常我们习惯直接使用new.malloc等API申请分配内存,这样做的缺点在于:由于所申请内存块的大小不定,当频繁使用时会造成大量的 ...
- NodeJS学习笔记二
类声明和类表达式 ES6 中的类实际上就是个函数,而且正如函数的定义方式有函数声明和函数表达式两种一样,类的定义方式也有两种,分别是:类声明.类表达式. 类声明 类声明是定义类的一种方式,就像下面这样 ...
- 字王4K云字库入驻github
字王4K云字库入驻github 网址:https://github.com/ziwang-com/zw4kFont 2015.3.28,字王4K云字库入驻github,原本或早或晚,不过这几天在g ...
- facebook graph api 报错SSLError(1, u'[SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:661)')
使用facebook graph api,报错如下 一开始以为是https证书验证失败,查了一下午源码,没有看到问题,于是把Python27\lib\site-packages\requests\ad ...
- Mybatis 之 缓存结构
Mybatis默认提供两种缓存方式,一级缓存是SqlSession 级别的缓存,二级缓存是Mapper 级别的缓存 SqlSession 级别的缓存,每个缓存是相对独立,互不影响:Mapper 级别 ...
- 20145201李子璇 《网络对抗》MSF基础应用
实践报告 MS08_067漏洞渗透攻击 ms11_050漏洞攻击 Adobe漏洞攻击 辅助模块应用(auxiliary/scanner/portscan/tcp漏洞) MS08_067漏洞渗透攻击实践 ...
- Hash课堂测试补写
Hash课堂测试补写 测试要求: 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85,75,57,6 ...
- Codeforces Round #390 (Div. 2) D. Fedor and coupons(区间最大交集+优先队列)
http://codeforces.com/contest/754/problem/D 题意: 给定几组区间,找k组区间,使得它们的公共交集最大. 思路: 在k组区间中,它们的公共交集=k组区间中右端 ...
- POJ 1061 青蛙的约会(扩展欧几里得算法)
http://poj.org/problem?id=1061 思路: 搞懂这个扩展欧几里得算法花了不少时间,数论真的是难啊. 含义:找出一对整数,使得ax+by=gcd(a,b). 接下来看这道题目, ...