ReactNative环境搭建与初始化项目

原创 2017年01月03日 12:51:46

RN自2015年出了以后,受到很多人的关注。通过一次编写多处使用的优势,在app的开发中使用的也越来越频繁,虽然现在看来兼容性和运行了流畅度还不及原生开发,但是在广大工程狮的努力下,RN以后的发展前景还是十分看好。本篇给大家介绍RN的环境搭建。
运行平台:win8 64位

第一步:官网上建议安装Chocolatey,这个是一个包管理软件,作用就是同过安装之后运行相应命令就可以下载你需要的插件。但是作用不大,直接忽略就好直接安装Python 2目前不支持python3。

第二步:下载node.js安装完之后更改镜像源 npm install -g cnpm –registry=https://registry.npm.taobao.org

第三步:npm install -g yarn react-native-cli下载rn的客户端。

因为我是android的开发,所以我就用不到第四步了,但是要是你没有安装android的sdk api 系统图片资源的话还要有第四步。

第四步:下载android的Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。下载方式有两种,第一种:直接去google下载。第二种;使用studio的sdkManager下载。下载完之后想要在cmd中直接使用还要配置一下tools和platform-tools的环境变量。

这样几步就把rn需要的都搭建好了。是不是很简单?没错,就是这么简单。总结一下就是rn中组件需要node.js和python的库来做支持,在android运行时又需要android的sdk和模拟器,所以我们依次下载了对应的开发包。

下载完毕之后,我们可以测试运行一下:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
这个命令的意思就是使用rn客户端初始化了一个叫AwesomeProject 的项目,进入项目目录后,在android平台运行。为确保package可以正常运行,我们可以先执行react-native start 开启package。然后在运行react-native run-android。项目创建之后的结构是这样的:

这里写图片描述

其中的index.android.js就是android项目引入的js文件,在打包的时候,也会根据这个js文件将需要的其他js文件全部打包为bundle。node_moudels这个文件是根据package.json这个文件加载的包,在初始化项目的时候如不指定rn版本,package.json中默认采用的是最新版本0.39。

“dependencies”: {
“react”: “~15.4.0-rc.4”,
“react-native”: “0.39.0”
},
最新的0.39版本还步稳定,建议在初始化的时候时候选择0.38.0的版本。android文件就是一个完整的整合了rn的工程,要是有studio可以直接运行,要是没安装studio也没关系,在第四步的时候我们安装了android的sdk与模拟器,可以直接使用adb install命令来安装。

React Native 环境搭建 初始化项目 运行 调试

关于RN,前些日子写过一篇初始化项目的,本文在项目已经构建完毕基础上,下面贴出上篇文章连接: Hello RN 按照上面文章走过一遍之后我们应该就运行起来了,但是RN的开发IDE用什么呢? 看过...
  • geanwen
  • geanwen
  • 2017年09月03日 15:34
  • 420

React Native 学习笔记(一)--init 项目 和 运行项目

首先,学习React Native首要的条件就是要有环境,至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同,我这边是Windows环境(这里不说...
  • uana_777
  • uana_777
  • 2016年11月29日 14:47
  • 3276

react native 之项目初始化一步到位

自从Facebook的react native 出世以来,风靡一时,作为前端开发猿,我也从此踏入了这条不归路。。。 前言:本人一直习惯于用windows系统开发Android程序,鉴于此以后的re...
  • mysimplelove
  • mysimplelove
  • 2017年11月09日 16:18
  • 208

react native开发中eslint配置和初始化

先简单介绍一下mac系统环境下,eslint的配置。
  • yuanshuaicsdn
  • yuanshuaicsdn
  • 2017年09月17日 06:49
  • 633

React Native for Android 实战(一):配置和起步

原文地址: http://www.csdn.net/article/2015-09-24/2825787-react-native Facebook开源React Native也势要统...
  • minkowsky
  • minkowsky
  • 2015年11月03日 18:13
  • 7307

ReactNative从入门到实践搭建环境

**ReactNative从入门到实践搭建环境** 参考React Native中文官网(V0.42)安装工具介绍根据最新的官方文档和实际集成经验整理2017-04-19 Android开发环境要求...
  • IT_luntan
  • IT_luntan
  • 2017年04月19日 14:01
  • 406

React-Native 与 Android 集成 <一、环境搭建>

如何把react-native集成到已经存在的Android studio工程中 这部分主要参考官方文档:https://facebook.github.io/react-native/docs...
  • Susan8888
  • Susan8888
  • 2016年07月04日 11:49
  • 2184

react native开发中eslint配置和初始化

先简单介绍一下mac系统环境下,eslint的配置。
  • yuanshuaicsdn
  • yuanshuaicsdn
  • 2017年09月17日 06:49
  • 633

React-Native之Android:原生界面与React界面的相互调用

这里原生界面是指用布局文件实现或java代码实现view的Activity,React界面是指用ReactJS实现的界面的Activity。 从某种角度看,React只是充当了Android里的vi...
  • qq_22780533
  • qq_22780533
  • 2016年07月14日 11:11
  • 5062

Windows下搭建ReactNative开发环境(Android)

学习了一段时间ReactNative,最近有空总结一下,同时给正在学习ReactNative的伙伴提供参考,少走弯路。现在网上大部分的教程都是不怎么完善,或者是Mac下的实现,然很多人对ReactNa...
  • maxwell_nc
  • maxwell_nc
  • 2017年03月09日 17:43
  • 3204
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactNative环境搭建与初始化项目
举报原因:
原因补充:

(最多只允许输入30个字)