React Native 之 Windows 下搭建开发环境

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

内容简介: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 下搭建开发环境

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

查看所有标签

猜你喜欢:

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

UML基础、案例与应用

UML基础、案例与应用

施穆勒 / 李虎、赵龙刚 / 人民邮电出版社 / 2004-7-1 / 42.00元

本书教读者循序渐进地、系统地学习UML基础知识和应用技术。和前一版相比,本书内容根据UML 2.0进行了补充和更新,随书光盘包含了建模工具Poseidon的试用版。 全书分为三部分24章。第一部分“基础知识”包括第1章到第15章,主要是介绍UML语言的基础知识以及面向对象的概念和思想,还简单介绍了UML在开发过程的应用方法。第二部分“学习案例”包括第16章到第22章,结合实例详细分析了UML的应用......一起来看看 《UML基础、案例与应用》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具