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 学习笔记(一)--init 项目 和 运行项目

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

ReactNative入门之android与rn初始化参数的传递

最近一直有事儿,所以博客没有更新,但是学习reactnative的脚步不能停止!所谓日积跬步,可跨千里。好啦,多余的话就不多说了,今天主要是讲解一下,android与rn之间初始化参数的传递。...

ReactNative-01(环境搭建及工具配置)

前言个人感觉ReactNative慢慢的将会越来越流行,毕竟可以花一样的时间,甚至更少的时间开发兼容Android和IOS两个平台的应用,但是在这之前,我们需要了解一些前端知识,如JS和ES6等,那么...

node.js学习(十二、ReactNative开发环境搭建)

按照官方文档https://facebook.github.io/react-native/docs/getting-started.html安装 windows上主意以下几点: 1.cmd需以管...

(一)ReactNative环境搭建

本文参考:http://www.lcode.org/史上最详细windows版本搭建安装react-native环境配置/1、安装Java 2、安装SDK 这里需要注意设置环境变量ANDROID_...

Android:ReactNative环境搭建遇到的坑

ReactNative官网提供的环境搭建方式:http://reactnative.cn/docs/0.27/getting-started.html按照官网提供的方式去走,直接使用XCode打开Aw...

ReactNative环境搭建与开发技巧以及重新启动adb

reactnative重新启动adb 下一步 到这一步项目创建完成 下面要将React Native集成到上面的Android项目中 环境搭建 Python 2 安装 下载安装完成...

ReactNative环境搭建

Mac安装依赖需要AndroidStudio、node.js、React Native command line tools和Watchman. 建议通过Homebrew安装node和watchma...

关于ReactNative环境搭建中的坑

首先依照React Native官网(http://reactnative.cn/)的文档介绍搭好环境后,发现在Android模拟器上能正常运行程序,而在真机上并不能正常运行。本人在搭建和测试中遇到的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactNative环境搭建与初始化项目
举报原因:
原因补充:

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