技术笔记:ReactNative学习笔记(一)————(RN)快速入门

简介: 技术笔记:ReactNative学习笔记(一)————(RN)快速入门

目录


一、什么是 ReactNative?1.1、React Native工作原理:二、React Native的优缺点优点:缺点:三、环境设置3.1、安装依赖项JDK3.2、JDK下载3.3、安装JDK11和JDK173.4、JDK1.8配置环境变量 3.4、JDK17安装3.5、JDK17环境变量配置3.6、最后总结 四、安卓开发环境4.1、 安装安卓工作室4.2、Android Studio 下载4.2.1安卓中文组下载4.2.2、谷歌中国下载4.2.3、Android Studio 3.5.2 版本安装4.2.4、Android SDK的环境变量配置创建新应用程序运行你的 React Native 应用程序第 1 步:启动地铁第 2 步:启动应用程序


回到顶部一、什么是 ReactNative?


作为目前流行的跨平台技术框架之一,React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架,可以同时支持iOS和Android两大移动平台。


React Native使用流行的JSX语法来替代常规的JavaScript语法,提高了代码的可阅读性。JSX是一种XML和JavaScript结合的扩展语法。


React Native框架的优势在于,只需要使用一套代码就可以覆盖多个移动平台,真正做到“Learn Once,Write Anywhere”。React Native框架底层使用的是JavaScriptCore引擎,基本上只需要更新一下JavaScript文件,即可完成整个App的更新操作,非常适合用来开发App的热更新功能。除此之外,React Native框架提供的开发和调试环境也是非常友好的,开发者只需要像刷新浏览器一样,就可以即时查看到代码修改后的效果,并且还可以在Chrome浏览器中查看控制台输出、加断点、单步调试等。


1.1、React Native工作原理:


React Native也是用的JSX语法。


回到顶部二、React Native的优缺点


优点:


容易上手:RN 入门较轻松,只要有一门面向对象语言的基础,都可以很快上手,而且社区较活跃,很多资料在网上都能查到。


跨平台开发:相比原生的ios 和 android app各自维护一套业务逻辑大同小异的代码,React Native 只需要同一套javascript 代码就可以运行于ios 和 android 两个平台,在开发、测试和维护的成本上要低很多。


快速编译:相比原生的ios 和 android app各自维护一套业务逻辑大同小异的代码,React Native 只需要同一套javascript 代码就可以运行于ios 和 android 两个平台,在开发、测试和维护的成本上要低很多。


快速发布:RN 可以通过 JSBundle 即时更新 App。相比原来冗长的审核和上传过程,发布和测试新功能的效率大幅提高。


缺点:


动画性能: RN 在动画效率和性能的支持还存在一些问题,性能上不如原生。这时候只能嵌入原生的组件,但工作量可能会比较大。


学习成本较高: 在某些地方开发者依然需要为 iOS 和 Android 平台提供两套不同的代码,比如在原有项目的基础上嵌入RN时,需要根据平台进行封装和配置。


配置比较麻烦:首先要安装 Node、Watchman、Yarn、Xcode(iOS)、CocoaPods(iOS)、Android Studio(Android)、JDK(Android) 等依赖。如果只开发单个平台,那就安装相应平台的依赖就行了。因为很多库都是在国外,所以还要切换镜像,或者给终端FQ才能下载,不然就会很慢,或者干脆就卡住了。


回到顶部三、环境设置


3.1、安装依赖项JDK


您将需要 Node、React Native 命令行界面、JDK 和 Android Studio。


虽然您可以使用您选择的任何编辑器来开发您的应用程序,但您需要安装 Android Studio 才能设置必要的工具来构建适用于 Android 的 React Native 应用程序。


如果您已经在系统上安装了 Node,请确保它是 Node 14 或更高版本。如果您的系统上已有 JDK,我们建议使用 JDK11。使用较高的 JDK 版本时可能会遇到问题。


3.2、JDK下载


官方网址


进入后 点击Download Java


点击后有三个LTS版本(Java17、Java11、Java8)和一个最新版(Java18)


以Java8为例进行下载


下载时会弹出此窗口,就是让你登录的,没有账号可以注册一个,然后下载就行


3.3、安装JDK11和JDK17


3.4、JDK1.8配置环境变量


(鼠标右键)此电脑 (选择)属性 (找到)高级系统设置 (选择)高级 (找到)环境变量


接下来开始配置环境变量(两次新建一次编辑)


先点击新建,变量名:JAVA_HOME


变量值:(是你JDK的安装路径)


填完之后点击确定


再次点击新建


变量名:CLASSPATH


变量值:(.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;)


然后找到Path 点击编辑


添加一个(.)


再添加(%JAVAHOME%\bin)


之后就是一直确定就行,到这里环境变量配置算是完成了,接下来查看一下


Windows键+R键 打开cmd命令控制台


输入 java -version 回车 查看jdk信息


参考JDK的切换:(5条消息) 同时安装多个版本的JDK(JDK1.8和JDK17)并配置环境变量沫洺的博客-CSDN博客


注意:如果切换不成功的情况


3.4、JDK17安装


3.5、JDK17环境变量配置


还是先找到环境变量配置


因为JDK1.8我们已经配置过CLASSPATH和PATH,所以只需要改一下JAVA_HOME就行


这里又是 (两次新建一次编辑)


点击新建,变量名:JDK1.8


变量值:(JDK1.8的安装路径)


点击新建,变量名:JDK17


变量值:(JDK17的安装路径)


找到JAVA_HOME,点击编辑


变量值改为(%JDK1.8%)


操作完之后的效果如下


最后还是对刚才的JAVA_HOME里的变量值改为(%JDK17%)就行


此时再查看jdk信息


就切换为jdk17了


3.6、最后总结


今后用哪个版本的JDK就只需要改变JAVA_HOME下的JDK版本号就行


比如1.8改为17


注意:如果切换不成功的情况


回到顶部 四、安卓开发环境


如果您不熟悉 Android 开发,设置开发环境可能会有些乏味。如果您已经熟悉 Android 开发,则可能需要配置一些内容。无论哪种情况,请确保仔细执行以下几个步骤。


4.1、 安装安卓工作室


下载并安装 Android Studio。在 Android Studio 安装向导中,请确保选中以下所有项目旁边的框:


Android SDK


Android SDK Platform


Android Virtual Device


如果您尚未使用 Hyper-V:(请参阅此处了解 AMD 或 Hyper-VPerformance (Intel ? HAXM))


然后,单击“下一步”以安装所有这些组件。


4.2、Android Studio 下载


4.2.1安卓中文组下载


Android Studio下载地址-安卓中文组,最新版本目前是3.5.2


这个版本相对来说比较稳定,但不是最新版的,很多内容可能你现在都使用不了,所以推荐你使用新版本的。


4.2.2、谷歌中国下载


Android Studio下载地址-谷歌中国,最新版本目前是Dolphin | 2021.3.1 Patch 1,这个版本新增了很多牛逼的功能,但是手上有工作项目的不要去轻易尝试,说不定你就编译失败了,失败了也不要担心,解决就可以了。


点击 Download Android Studio 进行下载,会出现一个弹窗告诉这个版本的一些信息。


不用管他,直接滑动到最后。


4.2.3、Android Studio 3.5.2 版本安装


双击运行


点击 Next 下一步


点击 Next 下一步


默认会给你装到C盘,这里我修改到了G盘(PS: 这里一定要改路径,否则随着你开发过程中,你的C盘空间会越来越小,这里我放的是G盘,只要不装在系统盘里,其他盘随意,不过也要有一定空间才行。),点击 Next 下一步


点击 Next 下一步(PS:这里没有其他骚操作,不要乱来)


等安装完成


点击 Next 下一步,


点击Finish进行第一次运行了,如果你不是第一安装了,那么就是覆盖安装,也是一步到位,没啥好讲的。现在我们运行一下:


如果你选择上面那个就会在你电脑安装默认的配置,这里不导入配置,直接OK即可,然后你就会看到AS的启动图片:


不得不说比之前的要好看一些,然后会弹出。


就是让发送使用的信息给谷歌,发个锤子,决绝,点击“Don’t send”,


这个地方是说你没有SDK,让你设置代码,这里不设置,点击 Cancel


等待一会儿


这个图片是告诉你,Android能做的事情有手机,穿戴设备,TV,还有智能设备等,点击 Next 下一步


Android Studio 默认会把你的SDK下载放在C盘,到时候你的C盘就炸了,谷歌太坏了,很多新手都会直接下一步


我们选择Custom 自定义,然后点击 Next 下一步


白色的看久了,我觉得眼睛不舒服,所以我都是默认黑色的,看个人喜好,然后点击 Next 下一步,之前我们选择自定义SDK的路径


所以这个地方就是让你该路径的,改好之后就点击 Next 下一步


然后就会下载对应当前版本的SDK配置文件,点击Finish就会开始下载(PS: 请在网络良好是尝试)


很明显,我的这个网速就不这么样,这个时候你就可以泡一杯咖啡,说到咖啡你有没有想到Java的图标呢?


好了,点击finish


1.启动一个新的Android Studio项目


2.打开一个现有的Android Studio项目


这里只说前面一两条,既然是做教程,那我们创建一个新的项目(PS:创建一个新的和打开一个已有的项目有什么区别呢,创建一个新的就只有这样项目最基本的已经插件和依赖,以这个新的为准,而打开已有的就会以老项目的环境为准,这就是为什么你从网上下载别人的代码再打开之后要配置很久的原因,因为你的环境和别人不一定就一样,其次就是里面用到的SDK、API版本、依赖框架等一些内容不一样,所以用的时间很久,犹豫是在网络慢的时候更突出,相当煎熬,我咖啡都喝了两杯了,还没有下载完配置,心碎,辣鸡软件,毁我青春)。


这里默认是创建的一个空的Activity(活动),点击Next。下一步


//代码效果参考:http://www.lyjsj.net.cn/wz/art_23242.html

点击finish 就会开始创建这个项目并下载一些配置文件

安装虚拟机


选择你需要的模拟器版本,看你需要来安装吧。


4.2.4、Android SDK的环境变量配置


Android SDK的环境变量配置


1、右键选中我的电脑,点击击属性,进入系统界面,如图:


2、点击高级系统设置,如图:


3、点击环境变量,如图:


找到自己的SDK安装的路径


4、点击系统变量下的新建按钮,输入ANDROID_HOME,并输入SDK的根目录E:\Android\SDK,如图:


5、点击确定,然后点击系统变量下的path变量,添加这两条内容E:\Android\SDK\emulator,E:\Android\SDK\tools,E:\Android\SDK\tools\bin,E:\Android\SDK\platform-tools,如图:


6,点击确定,一直确定回到桌面,打开cmd终端,输入adb version和emulator -version,确认配置生效,如图:


至此,Android SDK的环境变量已经配置完成!


接下来,选择“SDK工具”选项卡,并在此处选中“显示包详细信息”旁边的框。查找并展开该条目,然后确保已选中该条目。Android SDK Build-Tools33.0.0最后,点击“应用”,下载并安装安卓SDK及相关构建工具。//代码效果参考:http://www.lyjsj.net.cn/wz/art_23240.html


回到顶部创建新应用程序


如果您之前安装了全局软件包,请将其删除,因为它可能会导致意外问题:react-native-cli


npm uninstall -g react-native-cli @react-native-community/cli


React Native 有一个内置的命令行界面,你可以用它来生成一个新项目。您可以使用 Node.js 附带的 访问它,而无需全局安装任何内容。让我们创建一个名为“AwesomeProject”的新 React Native 项目:npx


npx react-native@latest init AwesomeProject


如果要将 React Native 集成到现有应用程序中,或者从 Expo 中“弹出”,或者要向现有的 React Native 项目添加 Android 支持,则不需要这样做(请参阅与现有应用程序的集成)。您还可以使用第三方 CLI 来初始化您的 React Native 应用程序,例如 Ignite CLI。


【可选】使用特定版本或模板


如果你想用特定的 React Native 版本启动一个新项目,你可以使用以下参数:--version


npx react-native@X.XX.X init AwesomeProject --version X.XX.X


回到顶部运行你的 React Native 应用程序


第 1 步:启动地铁


npx react-native start


第 2 步:启动应用程序


npx react-native run-android


如果一切设置正确,您应该很快就会看到您的新应用程序在Android模拟器中运行。


备注:JDK切换参考网站:(5条消息) 同时安装多个版本的JDK(JDK1.8和JDK17)并配置环境变量沫洺的博客-CSDN博客


备注:安装AndroidStudio可以参考这个网站:(5条消息) Android Studio 安装配置教程 - Windows(详细版)初学者-Study的博客-CSDN博客


备注:Android SDK的环境变量配置参考网站:(5条消息) Android SDK的环境变量配置_完成android sdk 环境变量配置、测试基本过程_w1990end的博客-CSDN博客

相关文章
|
2月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
245 2
|
2月前
|
Rust 前端开发 JavaScript
前端技术新探索:从React到WebAssembly的高效之路
前端技术新探索:从React到WebAssembly的高效之路
96 1
|
2月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
111 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
7月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
264 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
4月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发:技术探索与实践
【8月更文挑战第10天】React Native以其跨平台、高性能、易学习等优势,在移动开发领域取得了显著的成果。通过合理使用React Native,开发者可以更加高效地开发出高质量、低成本的移动应用。然而,在享受React Native带来的便利的同时,我们也需要关注其潜在的挑战和限制,并通过不断学习和实践来提升我们的开发能力。
|
4月前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
107 0
|
4月前
|
Java 前端开发 Spring
技术融合新潮流!Vaadin携手Spring Boot、React、Angular,引领Web开发变革,你准备好了吗?
【8月更文挑战第31天】本文探讨了Vaadin与Spring Boot、React及Angular等主流技术栈的最佳融合实践。Vaadin作为现代Java Web框架,与其他技术栈结合能更好地满足复杂应用需求。文中通过示例代码展示了如何在Spring Boot项目中集成Vaadin,以及如何在Vaadin项目中使用React和Angular组件,充分发挥各技术栈的优势,提升开发效率和用户体验。开发者可根据具体需求选择合适的技术组合。
97 0
|
4月前
|
前端开发 JavaScript Android开发
React Native 快速入门简直太棒啦!构建跨平台移动应用的捷径,带你开启高效开发之旅!
【8月更文挑战第31天】React Native凭借其跨平台特性、丰富的生态系统及优异性能,成为移动应用开发的热门选择。它允许使用JavaScript和React语法编写一次代码即可在iOS和Android上运行,显著提升开发效率。此外,基于React框架的组件化开发模式使得代码更加易于维护与复用,加之活跃的社区支持与第三方库资源,加速了应用开发流程。尽管作为跨平台框架,React Native在性能上却不输原生应用,支持原生代码优化以实现高效渲染与功能定制。对于开发者而言,React Native简化了移动应用开发流程,是快速构建高质量应用的理想之选。
96 0