首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Native 开发心得分享

再从需求考量,所编写应用更偏向于内容展示 app,而不是编写一个手机电池监控或者内存监控app,如果是后者,那这时选择任何跨平台开发都没有意义,像这些系统级别的API跨平台开发基本不太可能实现...模拟器无法请求本地 api​ 由于一开始是 Web 端进行调试开发,所以没留意到这个问题,直到切换到卓模拟器之后发现模拟器无法请求本地后端服务,IOS 端暂无这问题。...以上组件库可以说基本必装,能为 RN 应用使用体验提升一个档次。 一些案例/组件分析​ 分享一些在编写 RN 中一些案例。该说不说,RN 生态是真的可以,很多原生解决办法几乎都有。...篇幅有限,未来如果还有机会编写 RN 项目,再做一些分享(觉得应该不会有了)。 曾与卓开发打过两次交道: 一段是在学习卓逆向时候,免不了学习一些基础原生卓开发知识。...另一段是接触自动化开发时候,看到了 Auto.js 这个库, 可以使用 JavaScript 和 Node.js 实现小型卓应用(不支持 IOS),更多是使用这个库来编写一些脚本类相关应用。

11010

React Native推送通知:完整操作指南

原生平台特定通知服务(FCM/APNs) Android和iOS平台都提供了用于接收推送通知原生平台特定API 适用于卓设备Firebase云消息传递(FCM) 苹果推送通知服务(APNs)适用于...如果你访问Expo文档,你会找到关于如何在许多语言中实现服务器上推送通知信息。 在这个教程中,将使用一个Node.js服务器。...请注意,在这里,没有设置 FCM 就收到了 Android 设备通知,因为使用 Expo 应用进行开发。.../> ); } 结果: 现在我们已经看到了 Notifee 一个非常基本实现,让我们来看一个更复杂例子。...要解决这个问题,请转到 Expo 通知安装文档并遵循设置步骤。 Notifee 无法 Expo目中运行:不幸是,截至撰写本文时,这仍然是一个持续存在问题。

60110
您找到你想要的搜索结果了吗?
是的
没有找到

React Native 导航:示例教程

这个启动应用程序: npx expo start 接下来,使用以下任一命令 React Native 项目中安装 React Navigation 库: /* npm */ npm install...和 react-native-safe-area-context : 如果你注意到了,我们没有使用 npm 或 yarn 安装这些依赖。...建议您始终使用该命令来安装依赖包,因为 npm 和 yarn 将始终安装最新版本,而最新版本可能与您项目不兼容。缺点是可能会出现生产级别的错误。.../drawer 包: 接下来,我们将使用 npx expo install 安装依赖: npx expo install react-native-gesture-handler react-native-reanimated...老实说,更经常使用 Hook,因为它更容易功能组件中进行管理,而且使用起来也非常方便。

19210

使用Expo开发React-native程序(一)

开发React-native程序,除了官方提供React-native CLI外,目前还有一个选择ExpoExpo通过编写React和js代码,来生成IOS app、卓app和web端应用。...它主要包括两个工具:Expo CLI:命令行工具,用来创建脚手架、运行、build程序。Expo Go:安装在真机或虚拟机上app,可以直接运行你构建出来项目(不需要签名),方便debug和测试。...如何使用:1.全局安装Expo CLI工具npm install -g expo-cli2.创建项目(假设项目名称为expo-1)expo init expo-1或者npx create-expo-app...expo-13.安装其他依赖如果是苹果M1、M2芯片,需安装watchmanbrew install watchman4.启动npm start启动完成后,可以web端查看效果:http://localhost...:8081/也可以按 i 启动IOS虚拟机(前提是你已经安装了xcode和IOS虚拟机),启动IOS虚拟机后expo会首先给你安装Expo Go,如下图所示:安装好后就可以正式进入app了,效果如下:expo

31410

H5 手机 App 开发入门:技术篇

这个系列教程第一篇,已经介绍过了手机 App 种类。所谓 H5 页面,其实就是混合 App 前端,外面是一个原生壳,里面是 Web 网页。...三、原生技术栈 原生技术栈分成 iOS 和卓两个平台。 简单说,iOS 原生技术栈就是使用 Object-C 语言或 Swift 语言, Xcode 开发环境中编程。...然后,命令行安装脚手架工具expo-cli,新建一个示意项目。...这时可以打开手机端 Expo 客户端,扫描这个二维码,就会显示 App 页面。注意,计算机和手机必须在同一个局域网。...最主要一个问题是, UI 抽象层翻译出来 iOS 和原生页面,做不到完全一致,尤其是复杂页面,样式或功能存在差异。编译出来两个平台原生 App 往往是一个正常,另一个会出现各种奇怪小毛病。

6.6K41

深度测评 | 五大主流多端开发框架全面对比

安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 浏览器界面如下,最左边可以看到打开是本地 expo 调试台,选择本地...LAN 网络,然后点击 Run on iOS simulator,启动了笔者本地一个 iPhone 8 设备,然后看到了现在界面,最右边是本地生成模板代码。...首先肯定是需要下载安装完整 Xcode 和 Xcode developer tools 开发工具,默认大家都装了之后不在赘述。...ionic capacitor run ios -l --external 选择一个本地模拟器,之后就可以看到界面了,但是因为笔者本地 Xcode 是 11 老版本,会报编译错误,所以需要升级到最新...,并配套了系统级别的 API,支持云端编译和发布到不同平台,官网是:https://www.apicloud.com/AVMframe,有自己开发 IDE 支持,看今年 12 月份还有更新 SDK

5K30

跨平台开发框架到底哪家强?5款主流框架横向对比!

安装项目,项目安装完毕后进入项目执行 yarn start 会重新安装一次 expo-cli,之后本地启动项目,打开 dev 浏览器界面如下,最左边可以看到打开是本地 expo 调试台,选择本地...LAN 网络,然后点击 Run on iOS simulator,启动了笔者本地一个 iPhone 8设备,然后看到了现在界面,最右边是本地生成模板代码。...首先肯定是需要下载安装完整 Xcode 和 Xcode developer tools开发工具,默认大家都装了之后不在赘述。... capacitor run ios -l --external 选择一个本地模拟器,之后就可以看到界面了,但是因为笔者本地 Xcode 是11老版本,会报编译错误,所以需要升级到最新Xcode12...,并配套了系统级别的 API,支持云端编译和发布到不同平台,官网是:https://www.apicloud.com/AVMframe,有自己开发 IDE支持,看2021年12月份还有更新SDK

5.4K20

如何在React Native中添加自定义字体

下载并将Google字体集成到我们目中这个目中,我们将使用两种字体:QuickSand 和 Raleway,演示自定义字体集成,你可以Google字体上找到它们。...该文件夹内,有一个静态文件夹,所有的TTF文件都在其中。复制并保留这些TTF文件。 在下一部分,我们将会讲解如何将这些字体TTF文件集成到我们React Native CLI项目中。...我们模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持 Google 字体库中。...首先,你需要下载 font 文件到你目中,并安装 expo-font 包。对于这个教程,从 FontSquirrel 下载了 Source Code Pro 作为自定义字体。...无论是使用Expo还是React Native CLI,这个过程都将大大提升你应用美观度和可用性。

29210

不认为Flutter比React Native好

共享代码、知识与开发者 除了招聘之外,决定 Flutter 和 React Native 谁更强一个重要因素,就是共享代码、知识与开发者规模。 软件开发领域,有什么是比代码好更重要?...值得注意是,新一代 React Native 架构直接去年了桥接器,全面引入了原生同步集成优势。所以升级之后React Native 缺点已经不多了。...二者各有利弊,选谁不选谁、要看具体取舍……虽然网上关于这个问题总是吵沸沸扬扬,但还就真没个确切答案、二者差异也着实不太明显。...4 写在最后 这个话题着实敏感,稍不注意就要挨骂,所以我再说几句免责声明。首先,这只是个人观点。...总之,希望尽可能在文章中公平讨论这个问题。 也不关注那些什么美学、优雅层面的问题,例如 Dart 和 TypeScript 语法、或者 JSX 和 Dart 功能部件结构谁更好之类。

2.4K20

2024 前端趋势预测:React 不会被取代,AI 崛起,追求全栈宇宙

组件和 React Server 组件,而 Expo 一直推动Expo Router。...认为他们可能会: 去掉中间商。 他们包装了许多服务,比如Upstash,但他们可以推出自己解决方案来提高利润。 推出更多独特技术。...如果你可以 Expo Router 上构建并免费得到原生移动应用,为什么要选择 Next.js 呢?这是 Sanket Sahu 提出一个很有说服力论点。...不过,考虑到几个主要框架核心团队成员都在同一个屋檐下,如果我们看到 Vercel 推出一个全新充分利用 SSR 一揽子框架(也就是不基于 React),也不会感到惊讶。...移动开发不会有太大变化 认为原生开发不会有太大变化,通常情况下,开发者会继续使用他们已经使用过框架,就像忠实选民一样。毕竟,在这个领域,要说服人们改变阵营需要很大推动力。

16700

最新React Native环境搭建(从0到打包APK)

React Native 之旅 React Native 踩坑开始 5.1 假期 就这样短暂结束了,你都干啥了? ,嘛加了3天班,你们呢?...---- ​ React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误) Python 2.x , 必须安装2.x 版本。...它是围绕React Native和本机平台构建一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start 启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页中...打包成功,它会提供一个链接,去这个链接你就可以下载打包后APK 文件 ​ 下载APK 显示效果 到此该结束了 本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用,

4K00

React Native 项目 Web 端同构初探

“使用 JavaScript 来开发移动端 App 似乎是众多小厂比较普遍选择,作为拷贝经验丰富 Copy 工程师,所在小作坊采用React Native。..., React Native macOS 等库将 React Native 拓展到一个一个平台。...当然值得注意是,官方文档明确表示不支持 React Native 中不推荐使用组件和 API,因此如果您项目中某些功能依赖第三方库,可能那部分功能在 web 端同构时需要额外处理。...浅显地认为react-native-web就是把React Native组件和API都用适用于Web标签和API再适配实现一遍,使其Web上行为和在原生应用上尽量保持一致,从文档中提到 Alert...yarn web,这时会在本地8080端口运行一个服务,这时我们分别执行yarn ios 和 yarn android就能看到ios模拟器和Android模拟器中显示和web端一模一样页面,一次 react-native-web

3.5K30

最新React Native环境搭建(从 0 到 打包APK)

React Native 之旅 React Native 踩坑开始 ★5.1 假期 就这样短暂结束了,你都干啥了? ,嘛加了3天班,你们呢?...” ---- React Native 环境 安装(必须按照以下3个要求配置安装,否则会环境错误) Python 2.x , 必须安装2.x 版本。...它是围绕React Native和本机平台构建一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...” 光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start ★启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页中...” 打包成功,它会提供一个链接,去这个链接你就可以下载打包后APK 文件 下载APK 显示效果 到此该结束了 ★本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用

3.1K30

React Native学习笔记(二)—— 概要、开发环境搭建、第一个React Navite程序

一、概要 1.1、跨平台开发技术 移动端开发项目中。开发资源不够时,同时由两个团队维护卓和IOS两套原生APP是成本很高。...相比原来冗长审核和上传过程,发布和测试新功能效率大幅提高。 缺点: 动画性能: RN 动画效率和性能支持还存在一些问题,性能上不如原生。这时候只能嵌入原生组件,但工作量可能会比较大。...2.2.3、Android Studio安装 双击运行 点击 Next 下一步 点击 Next 下一步  默认会给你装到C盘,这里修改到了G盘(PS: 这里一定要改路径,否则随着你开发过程中,你...,改好之后就点击 Next 下一步  然后就会下载对应当前版本SDK配置文件,点击Finish就会开始下载(PS: 请在网络良好是尝试)  很明显,这个网速就不这么样,这个时候你就可以泡一杯咖啡...,创建一个就只有这样项目最基本已经插件和依赖,以这个为准,而打开已有的就会以老项目的环境为准,这就是为什么你从网上下载别人代码再打开之后要配置很久原因,因为你环境和别人不一定就一样,其次就是里面用到

3.2K21

使用umi开发react-native应用

于是就产生了这个项目:umi-react-native。 umi RN 中仅用来生成中间代码(临时文件),介于编码和构建之间,旨在引入 umi 开发姿势来提升 RN 编程体验。...概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载,主题定制、预设、切换,国际化支持,expo中链接字体图标...额外扩展插件:@umijs/plugins 与 DOM 无关umi插件都是可以使用,或者说支持服务端渲染插件基本也是可以 RN 运行环境中使用。...如果你 RN 工程安装了多种开发工具,则必须通过 umi 配置指定当前使用哪一个: 使用expo: // .umirc.js export default { expo: true, haul...:cd ios && pod install && cd -,之后记得使用yarn ios和yarn android重新编译,启动原生 App。

6.1K30

快速创建React Native App

快速创建React Native App 查看最新React Native官方文档你会发现,Getting Started章节下新添加一个Quick Start Tab页。...编辑App 经过上述步骤,快速开发React Native App环境就已经搭建好了,小伙伴门是不是迫不及待想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来Expo上查看运行效果哦...问题分析: 通过create-react-native-app命令创建一个React Native项目的时候,出现这个问题原因是npm 5一个bug所致@npm@5 known issue tracking...如果大家对快速创建React Native App还有不明白地方,可以文章下方给我留言,到了后会及时回复哦。...如果,大家开发原生模块中遇到问题可以本文下方进行留言,到了后会及时回复哦。 另外也可以关注新浪微博,或者关注Github来获取更多有关React Native开发技术干货。

2.3K51

快速创建React Native App

快速创建React Native App 查看最新React Native官方文档你会发现,Getting Started章节下新添加一个Quick Start Tab页。...编辑App 经过上述步骤,快速开发React Native App环境就已经搭建好了,小伙伴门是不是迫不及待想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来Expo上查看运行效果哦...问题分析: 通过create-react-native-app命令创建一个React Native项目的时候,出现这个问题原因是npm 5一个bug所致@npm@5 known issue tracking...如果大家对快速创建React Native App还有不明白地方,可以文章下方给我留言,到了后会及时回复哦。...如果,大家开发原生模块中遇到问题可以本文下方进行留言,到了后会及时回复哦。 另外也可以关注新浪微博,或者关注Github来获取更多有关React Native开发技术干货。

2.5K10

React Native也能玩区块链了

技术点 介绍实例之前,我们先来看一些基础概念: React Native 是一个由 Facebook 开发框架,允许你使用 JavaScript 和 React 构建跨平台移动原生App。...Expo一个工具集,由于它包括了一系列开箱即用原生 API,例如照像机等,因此使得上手构建 React Native项目变得非常简单。...stream)是如何模拟或者实现,这可能需要 链接到一些原生依赖;因此,你也许需要使用 expo App,因为它有非常详细样例项目,例如 react-nativify, React Native...因此,当我寻找可选方案并且发现了 expo功能请求 之后,作为一种解决方案,构建了一个针对 React Native babel preset,幕后使用了 crypto-browserify...并且十分确信,不久就可以 React Native 中使用区块链来构建真正移动 dApp 了。

1.2K20

React-native,我们一起走过坑。

先说明一下运行环境: 1.当时这个年代用RN版本是0.55 2.使用脚手架是create-react-native-app 调试 EJECT前(即生成那个android和ios文件前) 如果你像我那样...your own native builds 但是,是男人的话怎么能那么快eject,所以这时就该大名鼎鼎Expo’登场了,你只需要在你手机或者模拟器上安装上这个最新版Expo’软件,然后在你本地项目运行命令...npm start,这时不出意料的话你就会弹出一个二维码出来(但是不知为何每次都是出意外地弹了一个崩了二维码),在你Expo上扫一扫就能运行成功了,当然最后是少不摇一摇你手机打开调试,Android...JS前端工程师来说,一开始是拒绝 但是深入理解之后发现其实根本不用管它们。...解决方法: 1、使用Image自带getSize方法先获取宽高 2、使用别的大神组件React Native Fit Image 等 资源超过400kb左右不显示 所以说原生组件, 推荐使用别的组件库

84810

React-day1

:(React Native)市场需求量大,好找工作,提高我们行业竞争力 能接触到前端流行技术和框架(各大公司基本都再用React),注意:再React中我们全部都使用ES6语法(class) 前端是一个永恒行业...企业如何选择合适自己App开发方式 如果这个企业中,曾经使用原生技术开发过一些APP,那么维护时候,必然需要使用原生技术来维护 如果企业中,需要做一些游戏级别的应用,那么推荐使用原生,因为原生运行效率高...,对耗电量处理很好; 如果企业做一些应用级别的非游戏软件,比如 淘宝、京东、美团,就可以使用 混合APP了; 企业中,最主要是好点子,如果有了一个项目立案,那么最好要立即把这个项目做出来;这时候...生成安卓应用(在线) API地址 Hbuilder这个工具,是一个在线打包工具,使用很方便,不需要在本地配置开发环境;直接将做好网站,通过一些简单操作,就能在线打包为一个App出来; 项目上右键...×版本,注意勾选安装界面上Add Python to path,这样才能自动将Python安装到系统环境变量中; 安装完毕之后,可以命令行中运行python,检查是否成功安装了python。

2.2K20
领券