windows7下react-native搭建环境

第一步:安装Java

1.下载JDK,选择适应自己的机型;官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2.配置环境,问度娘:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

第二步:下载安装Android SDK

1.直接下载SDK Tools,然后通过SDKManager安装react-native运行所需要的环境,注意选择x64还是x86。

官网下载地址:https://developer.android.com/sdk/installing/index.html

国内下载地址:http://androiddevtools.cn/

2.设置SDK:点击右下角configure,打开 SDK Manager,我们需要安装以下项目的最新版本:

Tools/Android SDK Tools

Tools/Android SDK Platform-tools

Tools/Android SDK Build-tools

Android 6.0 (API 23)/SDK Platform

Extras/Android Support Library

Extras/Local Maven repository for Support Libraries

第三步:安装node.js,git

第四步:安装react-native命令行工具

1.打开命令窗口,输入 npm install -g react-native-cli

第五步:创建react-native项目

新建一个文件夹,利用命令控制窗口进入文件夹初始化一个项目:react-native init AwesomeProject

如果你网络不怎么样,这里会耗时相当相当久,甚至经常因为网络的原因下载项目失败!所以react-native中文官网推荐你使用淘宝镜像:$ npm config set registry https://registry.npm.taobao.org

第六步:运行packager:

1. cd AwesomeProject

2. npm start

显示下图表示成功

第七步: 连接设备或者模拟器 这里推荐设备

再打开一个命令窗口,运行adb devices,如果正确配置了Android SDK环境变量,我们在docs命令控制行中运行应该可以看到下面界面:

我们看到列表为空,是因为我们还未连接任何设备。我通过USB接入手机,再运行看看:

我们可以看到设备号为42048543c...表示已经连接成功。

有时候我这会出现如下问题:

应该是端口号被占用,我这里总被360手机助手占用,一般我都连接成功后退出360手机助手,然后重新npm start之后重复第七步。如若adb安装成功,还是这里出现这个问题的话解决不了就百度一下或者尝试重新插手机。

第八步:编译运行Android:

AwesomeProject目录下运行$ react-native run-android,就会构建工程并自动安装到你的模拟器或者设备,(如果关闭了npm start运行窗口就会同时启动用于实现动态代码加载的Node服务)。

第一次运行的时候,会下载gradle文件,该文件下载时间太过于漫长,解决办法如下:

1.打开http://androiddevtools.cn/ 找到gradle-2.4-all.zip这个文件的下载地址:http://pan.baidu.com/s/1c0dcgfe, 将它下载到本地。

2.用编译器打开AwesomeProject文件夹中的android文件中的gradle下的wrapper找到gradle-wrapper.properties文件,将其中的distributionUrl=https://services.gradle.org/distributions/gradle-2.4-all.zip 改为distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip,让它本地离线下载。其中E:/AwesomeProject/gradle-2.4-all.zip为你下载gradle后所保存的地址。

graddle构建过程中会下载很多jar包,如果出现下载失败,多重试几次。

3.当下在完grandle后一定会报错,如图:

因为本文所用的demo文件中很多版本号过于旧,我们需要改成自己下载的版本号,具体方法如下所示:

a.查看目录,没有23.0.2这个版本

找到AwesomeProject下的android下app修改他的build.gradle文件:

将 buildToolsVersion改成自己下载的版本号:

b.把Android项目下的build.gradle中

改成classpath ‘com.android.tools.build:gradle:1.2.3‘;

然后将测试的手机中所有安全软件都关闭,再次运行react-native run-android:

出现上图表示成功。

第九步:运行程序

一般会出现如图表示成功

当出现程序白屏时,找到并开启AwesomeProject的悬浮窗权限。 设置 --> 其他应用管理 --> 已下载 --> 点击AwesomeProject --> 权限管理 --> 显示悬浮窗 --> 允许 。

如果看到一个大红色的报错,这个报错是因为app获取不到packager生成的jsbundle文件,我们打开AwesomeProject,摇晃一下设备,就会看到下面的界面:

点击Reload JS成功的话就可以看到我们期待已久的welcome to React Native!

接下来就可在index.android.js或者index.ios.js文件中进行编辑。

时间: 2024-10-21 22:15:46

windows7下react-native搭建环境的相关文章

mac 下 react Native android环境搭建

1.参考  上一篇的博客文章 "mac 下 react Native ios环境搭建",前面几步都是必须的,只是,原生客户端不一致 2.Android Studio的安装 A:安装JAVA的SDK 注意:Android Studio需要Java Development Kit [JDK] 1.8或更高版本.你可以在命令行中输入 javac -version来查看你当前安装的JDK版本.如果版本不合要求,可以到 官网上下载 B:除非特别注明,请不要改动安装过程中的选项.比如Android

React Native学习笔记(一)Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

Windows下的 React Native 的环境搭建

感觉react好难QAQ 一.开发环境搭建要求 在Windows操作系统搭建React Native开发环境要求在电脑上安装好JDK,Android SDK,还要求电脑上安装有一套C++编译器,如果没有,推荐安装微软的VIsual Studio Community 2015 二.环境搭建 1.安装JDK(需安装1.8或更高版本) 下载对应你电脑版本的32位或64位JDK,第一次是JDK,第二次是jre,建议安装到同一个文件夹下的不同文件夹中.安装时可以修改安装目录. 2.JDK环境变量配置 (1

React Native iOS环境搭建

前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废话不多说了,下面简单的列出步骤吧. 1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/i

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

React Native 搭建开发环境

欢迎使用React Native!这篇文档会帮助你搭建基本的React Native开发环境.如果你已经搭好了环境,那么可以尝试一下编写Hello World. 根据你所使用的操作系统.针对的目标平台不同,具体步骤有所不同.如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同. 如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOS.macOS Android.windows Andr

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功.React  Native 开发环境安装和配置 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the follo

Android React Native 开发环境搭建---windows下

环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以看官方的地址,本文只是我个人的实践,并且仅限于window平台. 官方的地址:https://facebook.github.io/react-native/docs/getting-started.html 1.下载Chocolatey 去官网下载,一般没有问题. 2.Node,python2,j