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

简介: 可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html。 在官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,我在网上找了半天,找了部分内容,又根据自己的理解整理了一下

可以先浏览一下中文翻译的开发文档具体了解一下关于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

目录
相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
24天前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
35 1
|
28天前
|
前端开发 JavaScript 测试技术
|
26天前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
2月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
1月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
27 2
|
16天前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
24 0
|
2月前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
2月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发
【5月更文挑战第13天】React Native是Facebook的跨平台移动开发框架,基于JavaScript和React,允许开发者编写原生应用。它提供跨平台性、原生性能、平缓的学习曲线及丰富的社区支持。开发流程包括安装CLI、创建项目、编写代码、运行调试及测试发布。进阶应用涉及状态管理、性能优化、原生模块集成和自动化测试。React Native降低了开发成本,提升了效率,是移动开发的优选方案。