此内容根据徐赢老师的文档整理后写处

原版地址:https://tuomaxu.gitbooks.io/reactnative/content/

ReactNative是跨平开发的解决方案,在开发平台的选择上,mac平台和win平台都可以。

所需要工具如下:

1,Nodejs环境

2,create-react-native-app

3,Expo App

4,iPhone和安卓手机,或安卓手机模拟器(推荐使用夜神模拟器)

以上工具均有mac和win平台的安装包。

笔者使用的是mac平台做开发,所有下面演示都以mac平台进行。

安装Nodejs环境

1,进入http://nodejs.cnnodejs中文网,下载与自身环境相一致的nodejs安装包

2,安装包下载之后,双击进行安装

win平台的同学注意,安装过程中要关闭杀毒软件和各种安全工具

3,安装完成之后,打开命令行工具,检查是否安装成功,执行如下命令:

$ node -v

该命令执行结果为当前node版本,笔者当前版本为:

v6.9.1

4,检查NPM是否安装成功,

npm 是Node包管理工具,之后需要使用它来安装其他node程序包

在在命令行中输入如下命令:

$ npm -v

该命令执行结果为:

4.5.0

安装Yarn

Yarn是Facebook出品的一个依赖包管理工具,起作用和npm一样。但Yarn具有更多好用的特性:

  • Yarn 会缓存它下载的每个包,所以不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有

  • Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。

  • Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

  • 网络适应单个请求失败不会导致安装失败,请求失败时会重试。

安装yarn

访问Yarn官网,下载响应平台的安装包,进行安装

使用Yarn

安装好之后,其他工具会自动使用Yarn进行加速。

安装create-react-native-app命令行工具

create-react-native-app是一个综合创建ReactNative工程,并且不需要配置的工具,它极大的简化了入门开发的流程。具体的内容,大家可以进入其github.com的主页进行浏览。

安装create-react-native-app需要使用npm进行,在任意目录下,输入如下命令,便可以在该目录下创建一个ReactNative工程。

$ npm install -g create-react-native-app

安装成功之后,会展示安装路径。如安装不成功,请检查网络,重新安装。

创建ReactNative工程

ReactNative工程的模板需要通过create-react-native-app工具进行创建。创建方法如下:

1,通过命令行进入存放ReactNative工程的文件夹。

2,在该文件夹下执行如下命令:

$ create-react-native-app myapp

myapp为工程名,可以更换为其他字符,但必须小写

安装过程需要1-5分钟不等,如想提升安装速度,可以安装yarn,详情见yarn官网

下面为笔者安装成功截图:

笔者使用了yarn进行提速,所有命令中显示为yarn

运行预览工程

1,工程创建完成之后,便可以启动工程,开始开发和调试。

启动工程,首先要使用命令行工具进入工程更目录,然后运行如下指令

$ npm start

工程 启动之后,会生成一个二维码和一个本地链接,通过此此二维码或本地链接,便可预览工程运行效果。

2,启动工程之后,需要在手机端安装Expo App,使用Expo App对所开发的ReactNative App进行预览运行。

安装ExpoApp的方法如下:

iOS平台:在AppStore中搜索Expo client,如图

Android平台下,访问此链接:http://expo.io/--/api/v2/versions/download-android-apk 下载安装包并安装,安装过程中需要给此App全部权限。

3,Expo App在手机端安装完成之后,打开ExpoApp,通过其扫描二维码的功能,扫描生成的二维码,便可以在App内预览开发中的App工程

4,新建工程的运行效果为:

转载于:https://www.cnblogs.com/sunny-pei666/p/7235989.html

ReactNative开发环境相关推荐

  1. iOS开发 React-native开发环境配置

    英文原文地址:https://facebook.github.io/react-native/docs/getting-started.html 1.安装 homebrew (若已经安装可跳过此步) ...

  2. ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

    ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...

  3. windows 下配置 react native 开发环境

    windows 下配置 react native 开发环境 安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...

  4. (001) RN开发之Mac搭建开发环境

    接触RN第一步:React Native中文网 搭建开发环境 必须安装的依赖有:Node.Watchman 和 Xcode. 我们推荐使用Homebrew来安装 Node 和 Watchman.在命令 ...

  5. [转] 在Mac上搭建React Native开发环境

    原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述 前面我们介绍过在window环境下开发React Native ...

  6. ReactNative开发笔记(持续更新...)

    本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/ ...

  7. 1、RN跨平台开发——环境搭建

    了解React Native React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP.React Native着力于提高多平台开发的 ...

  8. ReactNative开发工具有这一篇足矣

    ReactNative系列文章: 1.<逻辑性最强的React Native环境搭建与调试> 2.<ReactNative开发工具有这一篇足矣> 正文 React Native ...

  9. python安卓版开发环境搭建_React Native Android 开发环境搭建(Windows 版)

    补上之前说的 Windows 系统的 React Native 开发环境搭建,坑还是比 Mac 环境下的多些.此文的受众还是已经搭建过 Android 开发环境的同学. 需要安装的软件 Chocola ...

最新文章

  1. 清华大学矣晓沅:“九歌”——基于深度学习的中国古典诗歌自动生成系统
  2. 科技部部长:基础研究是科技创新“总开关”
  3. java中顺式和链式_Java单链表顺序和链式实现(数据结构五)
  4. 第四章-分布式数据库HBase
  5. .net core学习
  6. geoServer的安装
  7. 【转】 UML各种线的含义
  8. 关于单点登录的实现方法
  9. 如何使用Mac DVDRipper Pro在mac上备份包括菜单和附加功能在内的完整的DVD
  10. table中强制不换行
  11. VPC中安装Windows Server 2008
  12. 2022Java最新学习路线(初学者必看)
  13. 配电室站房监控改造工程 环境辅助控制系统
  14. 彻底清除微软拼音输入法
  15. 如何搭建个人博客(详细图解)
  16. led动态显示 c语言,单片机LED点阵的横向移动(动态显示)
  17. 博士生导师谈他如何检索文献
  18. 学习Photoshop的一些网站以及找素材的网站
  19. 2016 版 Laravel 系列入门教程(二)【最适合中国人的 Laravel 教程】
  20. Echarts地图标记重合问题原因

热门文章

  1. vue数组中对象属性变化页面不渲染问题
  2. C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑
  3. python标签使用教程_怎样用Python做标签云
  4. ubuntu 添加用户、用户组
  5. 分析.cpp文件编译生成的汇编文件里语句的作用
  6. 三种单例模式的C++实现
  7. android IO流_Flutter实战经验(十):打包和发布到 Android 平台
  8. tensorflow源码编译教程_源码编译安装tensorflow 1.8
  9. mysql group by 重复_mysql – 使用GROUP BY删除重复项的查询
  10. 产品运营实战系列-产品设计从0到1全流程:以优惠券为例