React Native 之 Windows 下搭建开发环境

栏目: IOS · Android · 发布时间: 7年前

内容简介:React Native 之 Windows 下搭建开发环境

早就听说RN了,一直想去了解下,正好最近有空就来学习下并在博客里记录下自己的学习所得,不对之处望大家指出。

什么是React Native

React Native 之 Windows 下搭建开发环境

React Native 诞生于2015年,是一套跨平台、动态更新的JavaScript框架,号称: Learn once, write anywhere:Build mobile apps with React!

学习资料: React Native中文网

话不多说,正式进入开发环境的搭建吧。

准备工作

在 Windows 平台上开发 React Native 需要安装以下环境和工具:

  • Node.js
  • Android Studio

安装Node.js

React Native 开发需要用到Node.js环境。我们做 React Native 开发会经常性的和 Node.js 进行打交道。

安装 Node.js 有两种常见的方法:

  1. 一种是通过Windows包管理工具Chocolatey来安装。
    看官网就觉得这种方法太复杂了,就没用。
  2. 第二种就是直接去Node.js官网下载安装包来进行安装。

接下来我们来介绍下第二种方法吧。

下载Node.js

如图 React Native 之 Windows 下搭建开发环境

下载完成后,双击下载好的 .msi 文件安装即可,安装完成后,win+R,输入cmd打开终端,输入

npm -v

即可查看当前的Node.js版本

React Native 之 Windows 下搭建开发环境

安装React Native命令行工具

安装好了node.js,我们通过

npm install

来安装React Native命令行 工具 了。

win+R,输入cmd打开终端,输入并执行下面命令即可

npm install -g recat-native-cli

图我没有,只好盗用 Windows平台搭建React Native开发环境 的图了

React Native 之 Windows 下搭建开发环境

安装Android Studio

这个就不说了吧,烂大街了都。。。。

好了,这样环境搭建好了,我们来试着创建第一个React Native 应用吧

创建第一个React Native应用

win+R,输入cmd打开终端,输入并执行下面命令

react-native init <项目名字>
如:
react-native init FirstApp

如图

React Native 之 Windows 下搭建开发环境

项目结构如图

React Native 之 Windows 下搭建开发环境

其中 android 目录是Android项目。

运行

React Native应用创建完成之后便可以运行它了,运行一个React Native应用通常有两种方式:

  1. 通过React Native命令行工具

    win+R,输入cmd打开终端,输入并执行下面命令即可

react-native run-android
//如果要运行iOS项目则通过下面命令
react-native run-ios
  1. 通过AndroidStudio运行我们的项目

    将目录里的android目录导入AS中即可。

这里有个问题就是导入的时候注意下gradle的版本问题。
可以去项目的gradle->wrapper->gradle-wrapper修改
还有就是导入的过程可能会比较漫长。

运行成功后如图

React Native 之 Windows 下搭建开发环境

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Zen of CSS Design

The Zen of CSS Design

Dave Shea、Molly E. Holzschlag / Peachpit Press / 2005-2-27 / USD 44.99

Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to......一起来看看 《The Zen of CSS Design》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试