window环境下搭建react native及相关插件

可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html

在官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,我在网上找了半天,找了部分内容,又根据自己的理解整理了一下

1、安装Java

这里需要注意对环境变量的设置,可以根据java -version来检测一下

2、安装SDK

这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => E:\Android\sdk)设置环境变量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

3、安装node

这货是基于js的,node.js轻量级的Web服务器,想要是React Native跑起来需要安装node, 如果没有安装node.js,先去官网安装node.js,最好是4.1以上版本,来吧,猛戳这里,下载node.js,找好对应的版本,然后去安装就可以了。建议下载稳定版本

大家可以通过node -v的命令来测试NodeJS是否安装成功

4、安装react-native命令行工具React-native-cli

安装React-native-cli需要用到git,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可,git的下载可以从群共享里面。

git配置完成后可以clone React-native-cli了,建议大家到将React-native-cli克隆到某个盘,不要在c盘直接clone。

git clonehttps://github.com/facebook/react-native.git

cd react-native/react-native-cli

npm install -g

克隆完成如下:

然后我们安装react-native-cli。

创建项目

进入你的工作目录,运行

react-native init MyProject

并耐心等待数(或数十)分钟。

运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME
从25000改为更大的值(单位是毫秒)

安卓运行

注意在操作前,一定要先连上手机,不然编译会出现问题。

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。(这个过程屏幕上可能出现很多小数点,表示下载进度。这个时间可能耗时很久,也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。)

运行完毕后可以在模拟器或真机上看到应用自动启动了。

安卓调试

打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

在模拟器或真机菜单中选择Debug JS,即可开始调试。

其实到这里我们可以去网上找一个开源的项目,来先做一下运行测试。如果需要看如何创建项目的请跳过。

$ react-native init AwesomeProject

注意:AwesomeProject是项目的名称

如果么有的我提供一个之前开源的美团https://github.com/lookingstars/RNMeituan

然后用git将它克隆到本地,最好是非系统盘。

注: AwesomProject下的anroid下的local.properties文件是没有的,我们可以直接copy以前的Android项目。


接下来我们打开dos窗口,执行 npm start,会显示如图的提示,然后再输入react-native start命令。如果显示如图那样,证明你服务已经启动了,在这里我们可以看到服务的端口是8081.

然后打开浏览器:http://localhost:8081/index.android.bundle?platform=android

如果打印如下信息,说明成功了。

最后我们编译运行项目。记得要先打开Genymotin模拟器或者连上真机。

执行react-native run-android命令

这里给我提上了一个错误,说必须是在项目级别,也就是我们这里项目的最外层。

这是在再用 gradle构建项目依赖的包,到这里是不是感觉很熟悉了。

报了一个错,说的是有个jar的问题。

哦,又给我搞了个错误,gradle版本的问题,哎,不是自己建的项目,果然各种坑,好那我改下gradle的版本吧。

创建项目

react-native init reactNative

由于网络原因,可能需要等待一些时间

仔细预览我们会发现在安装cli的时候,系统给我们一些提示(告诉我们可以怎么运行项目):

To run your app on iOS:

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-ios

- or -

Open D:\html5\react_native\react-native\react-native-cli\reactNative\ios\reactNative.xcodeproj in Xcode

Hit the Run button

To run your app on Android:

Have an Android emulator running (quickest way to get started), or a device connected

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-android

我发现我在运行android.bat

运行package

运行React Native需要先启动 server,按照网上的一些教程需要运行node_modules\react-native\packager\packager.js,但是我们发现,这个文件夹下面好像是没有这个文件,但是我们发现了一个packager.sh,打开后发现是一个node命令

THIS_DIR=$(dirname "$0")

node "$THIS_DIR/../local-cli/cli.js" start "$@"

看到这里我们可以试着运行/local-cli/cli.js看看能不能起来

node cli.js start

时间: 2024-10-28 17:38:40

window环境下搭建react native及相关插件的相关文章

Windows环境下搭建React Native

随着移动开发越来越火热,前端开发也是有之前11年一直火热到现在,不过我发现从去年年底开发,Android和ios基本已经饱和了,特别是随着广大开源社区的中很多人贡献代码,开发已经不是什么问题了,所以现在好多公司招聘 都要求3年以上工作经验的,无外乎好多培训班出来的会写一些功能,会写一些界面实现,就出来上班了,但是深层次到framwork层,能够深入了解原理的还是少数,特别是当我们的项目遇到瓶颈之后,才能去看看你们怎么实现的.废话说道这里. 接下来我想说说面试,往往人家会要求会一点js,会一点ht

在Windows下搭建React Native Android开发环境

安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从AndroidDevTools下载. 然后进入SDKManager(可通过Andro

《React Native移动开发实战》一一1.3 搭建React Native开发环境

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

《精通Android 实例开发》——第1章,第1.11节在Linux环境下搭建Android平台

1.11 在Linux环境下搭建Android平台 1.11.1 实例说明 Android基于Linux平台,是一个开源的智能手机系统,所以除了能够在我们平常所用的Windows平台下开发Android应用项目外,还可以在Linux平台中开发Android应用项目.所以很有必要讲述在Linux平台中搭建Android开发环境. **1.11.2 具体实现 **以Linux ubuntu 8.10平台为例,搭建Android开发环境的具体流程如下所示. (1)安装虚拟光驱daemon400.exe

arm版本gcc gcc移植-如何把gcc编译器做成arm版本,本人要在arm环境下搭建编译平台,,,!!!急!!!

问题描述 如何把gcc编译器做成arm版本,本人要在arm环境下搭建编译平台,,,!!!急!!! 求大神 帮帮小弟 本人要在arm环境下搭建完整的编译环境,有没有人做过 啊 急 arm板:tiny6410,移植好的内核Linux FriendlyARM 2.6.38 红帽主机系统,交叉编译环境:arm-linux-gcc-4.5.1 现要将gcc-4.0.2 (或更高版本)做成arm版, 就是要将gcc-4.0.2移植到arm版本上 有谁有类似经历 分享下经验 大致介绍下复杂度 谢了 本人菜鸟一

《精通Android 实例开发》——第1章,第1.12节苹果Mac环境下搭建Android平台

1.12 苹果Mac环境下搭建Android平台 1.12.1 实例说明 截至2011年8月,Android和苹果系统系统分别占据智能手机操作系统份额的前两位.对很多使用苹果系统的开发人员来说,很有必要在苹果Mac系统下搭建Android平台. 1.12.2 具体实现 (1)登录http://developer.android.com/sdk/index.html来到Android SDK下载界面,在此单击下载链接"android-sdk_r12-mac_x86.zip",下载苹果Ma

cunit-怎样在window环境下安装Cunit单元测试框架

问题描述 怎样在window环境下安装Cunit单元测试框架 请教大神,Cunit单元测试框架的库文件怎么编译,怎样把Cunit添加到VC工程?谢谢.

如何在没网环境下搭建swift

问题描述 如题,需要部署的机器是不允许接触外网的,绝对的不许~,所以很尴尬,有没有大大知道如何在这样的环境下搭建swift组件.包括之前的apt-get软件部分和gitclonehttps://github.com/openstack/swift.git都是需要网络的,跪求解决办法,如何实现本地安装搭建,能解决其中的一部分也可以. 解决方案 解决方案二:可能说的不是很清楚,这里补充一下,就是要提前把要网上下载的东西下载好,然后在没有网络的环境下安装到服务器上面,问题就在于要用什么手段,或者格式,

windows上搭建react native环境

一.配置环境 1.准备相关资源  AndroidStudio Android开发集成开发环境(推荐下载含SDK tools版)  JDK for Windows Java Develop Kit(java开发工具)  Nodejs nodejs环境 2.ReactNative环境配置步骤  1) 使用npm安装ReactNative 在cmd命令工具中执行以下命令,注意并非 install react-native,装了react-native在后面init项目的时候会报错,需要卸掉再重装. 1