UI 一致性:如果你希望你的应用在各种设备和平台上保持一致的 UI,那么 Flutter 可能是更好的选择。Flutter 自带一套丰富的组件库,可以让你的应用在各种设备上看起来几乎一样。...Expo 快速研发 React Native App随着react native 诞生,以经历过一段不短时间的发展,有些 react native 配套的快速开发框架也随之出现,其中 expo 就是里面的翘楚...组件和 API,这可以帮助开发者快速构建复杂的功能,而不需要自己从头开始编写。...业务研发在业务研发的时候,我们避免不开需要选择一些高效的库来做支撑,如全局状态管理,数据缓存,网络请求,UI 库等等。我这里建议如下,当然选择适合自己 的很关键。...网络请求 tanstack / react-query,这个库是用来做数据请求的,mutate用来做触发,query 用来做查询,状态管理根本就无需你关心,缓存失效自动触发更新等机制真的是太爱了,你要做的真的就是面相逻辑编程
,并启动React Native开发服务器: yarn install yarn start 上述命令安装依赖项并启动Expo开发服务器,因此你可以通过在Android或iOS上使用Expo应用来测试你的应用程序...如果没有,我们会显示一个关于错误的警告,并立即从函数中 return 。如果令牌请求过程成功,我们将从函数中返回令牌。否则,目前,我们将Expo的 token 记录到控制台,以便于开发。...现在,我们将在后端的 /expoPushToken 上发布一个客户端或新用户到 url 。在请求的主体中,我们将添加一个设置为 pushToken 的对象 token 。...然后我们用以下命令启动我们的开发服务器: npm start 如果你将电脑和移动设备保持在同一网络中,你可以在React Native应用中看到一些预先包含的列表。...请注意,在这里,我没有设置 FCM 就收到了我的 Android 设备的通知,因为我在使用 Expo 应用进行开发。
在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。...(provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接) 说明: 执行当前 Web 请求期间,出现未处理的异常。...异常详细信息: System.Data.SqlClient.SqlException: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。...(provider: 命名管道提供程序, error: 40 - 无法打开到 SQL Server 的连接) 源错误: 执行当前 Web 请求期间生成了未处理的异常。...提示以下错误: “在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。”
Expo 官方还贴心的提供了云服务 Expo Application Services (EAS),意为这你可以你可以将你的 RN 项目在托管在云服务上,来执行构建与发布等流程。...在 pnpm 下无法启动 Android 错误提示:Error: Unable to resolve module ....网页也能成功显示效果,但是在 IOS 与 Android 中绝大多数情况下是不显示的。...模拟器无法请求本地 api 由于一开始是在 Web 端进行调试开发的,所以没留意到这个问题,直到切换到安卓模拟器之后发现模拟器无法请求本地后端服务,在IOS 端暂无这问题。...于是便采用相同的项目结构以及 UI 库了。但事实上在我编写的过程中,想要一套代码就能实现跨三端(web,android,ios) 效果并不佳了,这在下一章便会说到。
---- React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误) Python 2.x , 必须安装2.x 的版本。...Studio (需要配置AS 的环境,这里就不介绍了) 夜深模拟器 其它模拟器 ---- 安装 React Native 脚手架 我之前是按照官方提供的脚手架安装的,出现各种坑,创建好了项目...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令: expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件...,你只需要把你的 手机模拟器 或者 真机 连着电脑, 然后 点击 Run on Android device 就可以运行在手机上了。
在今天的帖子中,我们将构建一个小型web应用程序(以及iPhone/Android应用程序!)控制只有在家中且连接到家庭网络时才能工作的圣诞灯。...最后,还有在我的iPhone上运行的React原生应用程序。 通常,我不会尝试为这么小的项目构建iPhone应用程序。...为你的圣诞灯构建API 我们要做的第一件事是检查以确保我们已在 Jetson Nano 的 USB 驱动器上安装并运行 Z-Wave 棒。...这会POST向/state资源发出请求,并具有所需的新状态。 我可以通过expo build:ios. 完成后,我可以打开 Expo 应用程序并控制我的圣诞灯饰。 任务完成! 代码在哪里?...Flask 应用程序中还有一个视图,您也可以在浏览器中访问它来控制灯光。你可以在/网址上看到它。 我鼓励你让你的应用程序看起来比我的更好,并分享结果。 节日快乐!
” ---- React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误) Python 2.x , 必须安装2.x 的版本。...Studio (需要配置AS 的环境,这里就不介绍了) 夜深模拟器 其它模拟器 ---- 安装 React Native 脚手架 ★我之前是按照官方提供的脚手架安装的,出现各种坑,创建好了项目,启动项目...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...当你想打包你的App 成APK 文件: 你可以是使用EXPO 提供的 指令:expo build:android 打包的时候,会需要EXPO的账户, 因为它会发布到你EXPO账户下,生成APK 文件...,你只需要把你的 手机模拟器 或者 真机 连着电脑, 然后 点击 Run on Android device 就可以运行在手机上了。
AppLoader 的下载地址:https://docs.apicloud.com/Download/download#apploader 装上之后保持Mac 和手机在同一网络下,用 AppLoader...在真机上像网络,wifi 这些系统级别 API 就可以正常使用和预览了,报错也会有提示,开发体验很像小程序。...在开发工具上,基本上大家都可以使用Vscode 进行开发,都支持 hotReload 功能,有些提供了自己的IDE,集成化程度比较高,比如 AVM。 二,性能比较。...AVM 笔者也不太清楚为什么这么快,这确实是让笔者很吃惊,但是有一点,AVM 在笔者的android模拟器上安装失败,所以笔者是用真机测评的,可能会有一些影响,真机的性能更高一些。...:https://docs.apicloud.com/Client-API/api 数据上虽然差别比较大,比如 RN 的 API 和组件数虽然少一些,但是都是按模块划分的。
AppLoader 的下载地址:https://docs.apicloud.com/Download/download#apploader 装上之后保持 Mac 和手机在同一网络下,用 AppLoader...图片 在真机上像网络,wifi 这些系统级别 API 就可以正常使用和预览了,报错也会有提示,开发体验很像小程序。...在开发工具上,基本上大家都可以使用 Vscode 进行开发,都支持 hotReload 功能,有些提供了自己的 IDE,集成化程度比较高,比如 AVM。...AVM 笔者也不太清楚为什么这么快,这确实是让笔者很吃惊,但是有一点,AVM 在笔者的 android 模拟器上安装失败,所以笔者是用真机测评的,可能会有一些影响,真机的性能更高一些。...:https://docs.apicloud.com/Client-API/api 数据上虽然差别比较大,比如 RN 的 API 和组件数虽然少一些,但是都是按模块划分的。
此外,由于Expo很受欢迎,许多人常常选择使用它,我们也将探讨如何在Expo中构建启动屏幕。 什么是启动画面? 启动画面是用户访问应用程序其余功能之前出现的第一个屏幕。...尽管这听起来很直接,但它是构建和保留用户群的关键工具。 在React Native中创建启动屏有很多好处。例如,考虑一个从API加载数据的场景。在用户等待时显示加载器是一种良好的用户体验。...完成后的应用将如下图所示 为什么启动画面的图片大小很重要 为移动应用创建启动画面可能会有些棘手,你肯定不希望由于启动画面分辨率的不一致在某些设备上出现显示问题。例如,安卓设备的需求与iOS完全不同。...在你继续之前,请确保你有一张高清的,2000x2000像素(72 PPI)的图片准备好。你可以在GitHub上克隆这些教程的完整源代码。...使用 Expo,我们可以以简化和直接的方式做到这一点,因为 Expo 允许我们在 app.json 文件中配置我们的启动屏幕和图片。 我们将使用上述的 App.js 和 Login.js 文件。
本质上,我们正在渲染 JSX 与四个文本以显示在屏幕上,并使用 React Native 的 StyleSheet API 为每个 Text 组件附加不同的 fontFamily 样式。...Expo 支持两种字体格式,OTF 和 TTF,这两种格式在 iOS、Android 和 Web上都能稳定运行。如果你的字体是其他格式,你将需要进行高级配置。...首先,通过运行此命令创建一个新的Expo项目: npx create-expo-app my-app 一旦项目成功安装,通过运行 npm run start 启动开发服务器,并选择iOS 或 Android...使用不受支持的字体格式:在使用自定义字体时,验证你正在使用的系统(iOS,Android 或网页)是否支持你正在使用的字体格式(例如,.ttf,.otf)非常重要。...如果不支持,可能会在开发过程中出现意外错误。 性能影响:在React Native应用程序中添加自定义字体时,请注意它们的文件大小(以kb/mb为单位)。
在 Expo 中,相机被抽象化,您可以使用 expo-camera 包来渲染原生 iOS 和 Android 相机视图。 虽然看起来是一个很小的区别,但它会影响某些项目的关键要求。...因此,如果您希望使用利基原生 API 或希望在发布后立即访问新的平台功能,您可能需要选择 Expo。 3. 您是否希望跨平台拥有视觉上相同的界面?...如果您计划频繁地向用户推送更新或希望快速修复生产中的错误,请为您的下一个项目选择 Expo。 7. 您是否计划组建一个开发人员团队?...除此之外,您还可以选择使用 Expo 应用程序服务 (EAS): EAS Build 在云端构建您的应用程序,因此您无需担心为 iOS 和 Android 设置构建环境。...我观察到的趋势是,公司使用 Flutter 来构建员工体验,在这种体验中,在多个设备上拥有视觉上相同的体验对于内部应用程序来说是有意义的,而公司使用 Expo 来构建消费者体验。这些显然不是绝对的。
传统上 iOS 应用使用 Xcode 工具、 Objective-C 和 Swift 语言进行开发, Android 应用使用 Android Studio 工具、 Java 和 kotlin 语言进行开发...3、React Native Code Push React Native Code Push 是一个用于 React Native 应用热更新的服务,它可以帮助开发者在不发布新版本的情况下,快速地将应用程序的更新推送到用户设备上...另外,React Native CLI 还提供了一些常用的命令,比如 run-ios、run-android 等,可以方便地启动应用并在模拟器或设备上运行。...9、Expo Expo 是一个开发平台,提供了许多开箱即用的组件和 API,可以帮助开发者更快速地开发 React Native 应用。...同时,Expo 还提供了一个在线开发工具 Expo Snack,可以方便地在浏览器中进行开发和调试。
首先,Expo 是一个开源框架,背后有一个强大的社区支持。你可以在 Expo 的 GitHub 仓库 找到它的源码、更新日志以及社区贡献的内容。...Expo 的核心特点你可能会问,Expo 和普通的 React Native 开发有什么不同?Expo 的一大特点就是“省心”。它帮你封装了大量底层配置,让你不需要花时间在复杂的环境搭建上。...丰富的生态系统Expo 的生态系统也是它的一大亮点。它内置了大量的常用功能模块,比如相机、位置服务、传感器等等,你可以直接调用这些API,而不需要自己动手去编写原生代码。...社区与支持最让人欣慰的是,Expo 背后有一个活跃的社区。你可以随时在GitHub上提出问题,或者浏览别人已经解决的类似问题。除此之外,Expo 的文档非常详细,新手也能很快上手。...如果你想了解某个API的用法,文档里都有详细的示例代码,这让学习曲线变得非常平滑。我遇到的一些问题就是在 docs 上找答案,比如如何本地构建,如何弹出原生模块,因为有可能需要做一些原生开发。
如图所示,你只需要管理渠道即可:见下图所示,我因为有Gemini 的API,所以我给添加进来了,注意这里是需要一点点黑科技的,one-api 最好部署在某些不可描述的“万恶”的区域,这样以便他可以顺利和一些很激动人心的大模型进行对话...在本地保存对话记录,和管理对话,当然就是简单的增删改查了。个人设置中心,包括配置 OpenAI 的 API 密钥、模型参数等。主题设置功能,最基本的是dark/light模式的切换了。...技术栈选择当然,我们选择React Native,用于跨平台移动应用开发,这样一套代码可以搞定android和ios,后端one-api直接按照文档,使用docker 进行安装即可,没有什么难度。...本地数据存储,我们使用 async-storage ,网络请求框架,我们这次晚点有意思的,使用 anstack.com/query 。...在 UI 方面,我选择了 react-native-element ,这个让我们不用担心界面太丑在全局状态上,我们选择了 zustand,他相对 redux 会简单很多,配合中间件,结合 async storeage
React Navigation 是用 JavaScript 编写的,并不直接使用 iOS 和 Android 上的原生导航 API。相反,它重新创建了这些 API 的某些子集。...React Native Navigation 有一点不同,它直接使用 iOS 和 Android 上的原生导航 API,这使得它能够提供更加原生的外观和感觉。...我建议您始终使用该命令来安装依赖包,因为 npm 和 yarn 将始终安装最新版本,而最新版本可能与您的项目不兼容。缺点是可能会出现生产级别的错误。...则利用了原生 API;iOS 上的 UINavigationController 和 Android 上的 Fragment,这样导航的行为就会与原生构建的应用程序一样。...我们将其配置为熟悉的 iOS 和 Android 外观和感觉:在 iOS 中,新屏幕从右侧滑入,而在 Android 中,新屏幕从底部淡入。
前几个星期,点开了RN的技能树,废话不多说,那我就意简言赅地记录一下自己遇到的坑,避免后人再犯自己的错误。...your own native builds 但是,是男人的话怎么能那么快eject的,所以这时就该大名鼎鼎的’Expo’登场了,你只需要在你的手机或者模拟器上安装上这个最新版的’Expo’软件,然后在你的本地项目运行命令...npm start,这时不出意料的话你就会弹出一个二维码出来(但是不知为何我每次都是出意外地弹了一个崩了的二维码),在你的Expo上扫一扫就能运行成功了,当然最后是少不摇一摇你的手机打开调试,Android...当运行npm run android/npm run ios后,你的手机/模拟器毫无意外就会被强制地安装上了一个应用了,这时候调试同上的。...默认尺寸是DP 百分比不能用 可以用flex:1,flex:2,做等比例 组件坑 Image 要先设宽高 为了性能方便所有网络图片都要先设固定宽高(来自官方傲娇的解析) 像这样 <Image
,是一个使 React Native 组件和 API 能运行在 Web 上的库,其和 React Native Windows, React Native macOS 等库将 React Native...浅显地认为react-native-web就是把React Native的组件和API都用适用于Web的标签和API再适配实现一遍,使其在Web上的行为和在原生应用上尽量保持一致,从文档中提到的 Alert...web,这时会在本地8080端口运行一个服务,这时我们分别执行yarn ios 和 yarn android就能看到在ios模拟器和Android模拟器中显示和web端一模一样的页面,一次 react-native-web...,通过.web.js扩展名可以使该文件仅在Web上使用,其他一些可用的扩展如.native.js、.ios.js和.android.js适用于移动端。...不过为了处理某些在Web上能运行而在移动端不能运行的业务,需要将代码抽离出来存放在``.web.js`为后缀的文件中。
https://docs.expo.dev/ https://github.com/expo/expo Expo 是一个开源平台,旨在帮助开发者构建可以在 Android、iOS 和 Web 上运行的通用原生应用...通过结合使用 React 和 JavaScript,开发者可以在一个统一的环境中构建跨平台的应用,而不需要切换不同的技术栈。...Expo 的核心优势之一就是它提供了一个完整的 SDK、模块 API、CLI 工具以及丰富的文档,极大简化了跨平台开发过程。...例如,Expo 应用服务 (EAS) 提供了一套集成的服务平台,能够帮助开发者在个人或团队环境中更轻松地管理和发布应用。...在官方文档中,Expo 还提供了丰富的资源,包括教程、常见问题解答 (FAQ) 和开发指南,帮助开发者解决在使用过程中遇到的各种问题。 Expo 鼓励开发者为开源社区贡献代码。
回想我刚接触rn的时候,用的是mac,配置环境,初始化一个rn项目,然后通过xcode打开,然后在模拟器运行,或者在手机真机调试,都经过了不断的调试,发现错误,查找文档,重新安装,调试,真的很烦。...如果我还想打包成Android,还要去配置Android的编译环境,装sdk,调试环境。 有可能就从入门到放弃了。。。...Expo 好处就是: 不用再去配置烦人的 iOS、Android 编译环境 可以用 Windows 开发 iOS 版的 RN 应用。...接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。 并且只要在 Expo 中打开过一次,就会在 App 中保留一个入口。 Expo相当于一个壳,你只需关注js层面的开发即可。...参考资料: https://docs.expo.io/versions/latest/introduction/index.html
领取专属 10元无门槛券
手把手带您无忧上云