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

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

主要有两种类型通知: 前台通知:当应用程序正在打开运行时发送给用户通知 后台通知:无论应用程序是否当前打开,都会发送 推送通知在移动应用开发世界中非常流行,原因有很多。...,启动React Native开发服务器: yarn install yarn start 上述命令安装依赖项启动Expo开发服务器,因此你可以通过在Android或iOS上使用Expo应用来测试你应用程序...获取推送通知令牌 记住,要在React Native应用程序中使用推送通知,我们首先需要注册应用程序以获取推送通知令牌。在这里,我们将使用Expo通知API。...然后我们用以下命令启动我们开发服务器: npm start 如果你将电脑和移动设备保持在同一网络,你可以React Native应用中看到一些预先包含列表。...后台通知 感谢 Notifee,我们甚至可以创建后台通知,即使应用程序关闭,也可以发送。这适用于我们想要发送一个无声通知情况,无论应用程序是否打开,例如文本消息或已完成下载,都需要发送。

62710

React Native 项目 Web 端同构初探

使用 JavaScript 来开发移动端 App 似乎是众多小厂比较普遍选择,作为拷贝经验丰富 Copy 工程师,我所在小作坊采用React Native。...,通过.web.js扩展名可以使该文件仅在Web上使用,其他一些可用扩展如.native.js、.ios.js和.android.js适用于移动端。...当然,如果您希望将本不同端代码都保存在一个index.js文件,则可以使用import { Platform } from 'react-native'来按照条件区分不同平台代码。...App.web.tsx 该文件是临时添加文件,用于在使用React Native Web 同构之前验证我们设置是否正常运行。...后记 结合上述简单案例,在后续实际业务,我们可以逐步尝试同构业务到Web逐步进行验证。 希望这篇文章对您有所启发,也请各位大佬多多指教!评论区始终为您敞开!

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

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

在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用添加自定义字体方法。...下载并将Google字体集成到我们项目中 在这个项目中,我们将使用两种字体:QuickSand 和 Raleway,演示自定义字体集成,你可以在Google字体上找到它们。...在 Google Fonts 中找到你想要字体,选择你想要样式(例如,Light 300, Regular 400 等),使用下载全部”按钮下载整个字体文件夹: 该文件夹将以ZIP文件形式下载...让我们看看输出: 在Expo使用自定义字体React Native 在这一部分,我们将学习如何在Expo使用自定义字体。...首先,你需要下载 font 文件到你项目中,安装 expo-font 包。对于这个教程,我从 FontSquirrel 下载了 Source Code Pro 作为我自定义字体。

31210

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

最近公司有个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...当你想打包你App 成APK 文件: 你可以使用EXPO 提供 指令: expo build:android 打包时候,会需要EXPO账户, 因为它会发布到你EXPO账户下,生成APK 文件...光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start 启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页...是不是很轻松哈,使用官方提供,你自己配置,查找模拟器。 React Native 支持热更新 这样很方便我们开发APP 调试, 数据改变, 视图同时改变。...打包成功,它会提供一个链接,去这个链接你就可以下载打包后APK 文件 ​ 下载APK 显示效果 到此该结束了 本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用

4K00

React Native 开发心得分享

是否有必要学 react-native?​ 先说一个结论:RN ≠ 原生,别指望会个 react 就能写出靠谱原生应用。...ExpoExpo 是基于 React Native 整合大量常用 native module(Expo SDK),像原生功能如相册,相机,蓝牙等功能,在 expo 都是直接集成,相当于封装原生...此外 Expo 还提供了 Expo Go App,只需要在你移动端设备安装它,启动开发服务器生成 QR 码。...在浏览器打开 snack.expo.dev ,点击 MyDevice,扫码并在 Expo app 查看。 会自动将该程序实时运行在你移动端设备,意味着你更改代码也将会同步到Expo go 。...这种效果可以使用监听 ScrollY 配合 react-native-reanimated 动画来实现,如果你不想自己实现也可以看看 @codeherence/react-native-header,上图便来自此库

11310

React Native构建启动屏

在这个教程,我们将演示如何在React Native构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOS和Android应用构建出色欢迎界面。...可以说,启动画面是让您移动应用品牌名称和图标深入用户记忆最佳方式。 在网络应用,我们使用预加载器为用户提供动画娱乐,同时服务器操作正在处理。...你应该会看到类似这样情况: 为Android构建启动屏幕 对于Android,导航到 MainActivity.java 文件更新代码以使用下面的 react-native-splash-screen...使用 Expo,我们可以以简化和直接方式做到这一点,因为 Expo 允许我们在 app.json 文件配置我们启动屏幕和图片。 我们将使用上述 App.js 和 Login.js 文件。...为了做到这一点,我们将使用 expo-splash-screen 包,我们可以用以下命令来安装: npx expo install expo-splash-screen 接下来,在我们 App.js

32810

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

最近公司有个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...当你想打包你App 成APK 文件: 你可以使用EXPO 提供 指令:expo build:android 打包时候,会需要EXPO账户, 因为它会发布到你EXPO账户下,生成APK 文件...” 光说不练 纯耍流氓,下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start ★启动成功后,它会开启一个服务,会自动打开一个网页,在这个网页...是不是很轻松哈,使用官方提供,你自己配置,查找模拟器。 ” React Native 支持热更新 ★这样很方便我们开发APP 调试, 数据改变, 视图同时改变。...” 打包成功,它会提供一个链接,去这个链接你就可以下载打包后APK 文件 下载APK 显示效果 到此该结束了 ★本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用

3.1K30

几个好用React-Native 开发工具

传统开发,按照平台划分为 iOS , Android , Windows 和 Mac 。其中,随着移动设备使用移动端应用开发也越来越多。...一、工具推荐 1、Hermes 引擎 Hermes 是 Facebook 开发一种 JavaScript 引擎,它专门针对移动设备进行优化,可以提高 React Native 应用性能和启动速度。...9、Expo Expo 是一个开发平台,提供了许多开箱即用组件和 API,可以帮助开发者更快速地开发 React Native 应用。...Expo 使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 应用。...二、写在最后 好技术和工具不仅可以提高应用性能和开发效率,还可以让开发者更好地应对不同开发场景和需求,希望可以和大家一起更好地理解和使用 React Native 新技术和工具。

2.1K10

React Native也能玩区块链了

技术点 在介绍实例之前,我们先来看一些基础概念: React Native 是一个由 Facebook 开发框架,允许你使用 JavaScript 和 React 构建跨平台移动原生App。...stream)是如何模拟或者实现,这可能需要 链接到一些原生依赖;因此,你也许需要使用 expo App,因为它有非常详细样例项目,例如 react-nativify,在 React Native...因此,当我寻找可选方案并且发现了 expo功能请求 之后,作为一种解决方案,我构建了一个针对 React Native babel preset,幕后使用了 crypto-browserify...或者使用 uport 来注册投票者识别码,但是我还 不确定是否支持 React Native。...并且我十分确信,不久就可以React Native使用区块链来构建真正移动 dApp 了。

1.2K20

如何从零高效开发一款适配 Android 和 iOS 移动端App

目前来看,开发 移动端 App 最好跨端方案应该是 flutter 和 React Native 了。...我们在选择 flutter 和 React Native 时候,需要考虑以下几个关键因素:团队成员经验:如果你团队已经熟悉 JavaScript 和 React,那么使用 React Native...Expo 快速研发 React Native App随着react native 诞生,以经历过一段不短时间发展,有些 react native 配套快速开发框架也随之出现,其中 expo 就是里面的翘楚...,我这两天也正是体验了一下 expo 研发一个 chatbox App,有了一些体验,所以才整理输出一篇关于 expo 开发 react native 小作文。...App 调试expo 比较方便是,他自带摇一摇打开黑科技调试页面,如下所示:打开调试界面之后,我们可以非常方便使用性能观测工具,Element Inspector 等等,如下,是查看界面的布局。

48000

React Native 开发工具推荐

去年终于引来了 React Native 新版本 0.70.0,开发者也大为振奋。React Native 作为一种跨平台移动应用开发框架,在持续演进也不断涌现出新技术和工具。...一、工具推荐1、Hermes 引擎Hermes 是 Facebook 开发一种 JavaScript 引擎,它专门针对移动设备进行优化,可以提高 React Native 应用性能和启动速度。...使用 React Native Debugger 可以提高开发效率和代码质量,推荐开发者在开发过程中使用。...Expo 使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 应用。...图片二、写在最后好技术和工具不仅可以提高应用性能和开发效率,还可以让开发者更好地应对不同开发场景和需求,希望可以和大家一起更好地理解和使用 React Native 新技术和工具。

1.7K20

移动开发者必备 React Native 开发工具

去年终于引来了 React Native 新版本 0.70.0,开发者也大为振奋。React Native 作为一种跨平台移动应用开发框架,在持续演进也不断涌现出新技术和工具。...一、工具推荐1、Hermes 引擎Hermes 是 Facebook 开发一种 JavaScript 引擎,它专门针对移动设备进行优化,可以提高 React Native 应用性能和启动速度。...使用 React Native Debugger 可以提高开发效率和代码质量,推荐开发者在开发过程中使用。...Expo 使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 应用。...二、写在最后好技术和工具不仅可以提高应用性能和开发效率,还可以让开发者更好地应对不同开发场景和需求,希望可以和大家一起更好地理解和使用 React Native 新技术和工具。

1.7K20

使用umi开发react-native应用

笔者在Web端习惯使用 umi 后,就变得越来越“懒”,什么问题都用这一锤子解决。 当工作涉及到 react-native(后文简称:RN)应用内容时,发现 umi 暂时没有支持RN打算。...下游可以使用React Native CLI:RN 官方开发/打包工具; expo:不需要搭建 iOS 和 Android 开发环境,工程目录干净清爽,添加 RN 依赖方便快捷; haul:第三方...你也可以略过本文直接查看示例工程: 使用 React Native CLI:UMIRNExample 使用 expo:UMIExpoExample 使用 haul 拆包:UMIHaulExample...概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载,主题定制、预设、切换,国际化支持,在expo链接字体图标...额外扩展插件:@umijs/plugins 与 DOM 无关umi插件都是可以使用,或者说支持服务端渲染插件基本也是可以在 RN 运行环境中使用

6.1K30

React Native 导航:示例教程

移动应用程序由多个屏幕组成。在构建移动应用程序时,首要考虑是如何处理用户在应用程序导航问题,例如屏幕展示和屏幕之间切换。...在本教程,我们将探讨 React Native 中导航基础知识,介绍如何开始使用 React Navigation,通过一些 React Native 导航示例进行讲解。...注:在本文中,我们将在 React Native 应用程序中使用 Expo。...该组件管理导航树包含导航状态。 最后,运行应用程序 npx expo start 2.使用 TabNavigator 大多数移动应用程序都有一个以上屏幕。...在此类移动应用程序,常见导航方式是基于标签导航。React Navigation 有一个名为 createBottomTabNavigator 组件可以帮助我们实现这一点。

19710

快速创建React Native App

本文向大家分享如何快速构建React Native App以及在使用快速构建方案可能存在一些问题及解决方案。...运行React Native应用 想要将上述创建aa运行起来,你需要下载安装Exponent。 为了方便大家下载使用,我已将Exponent上传到网盘,供大家下载使用。...然后用Expo扫码屏幕上二维码,aa就可以运行在Expo上了。 ? 提示:为了确保Expo App能够正常访问到你PC,你需要确保你手机和PC处于同一网段内或者他们能够联通。...编辑App 经过上述步骤,快速开发React Native App环境就已经搭建好了,小伙伴门是不是迫不及待想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来在Expo上查看运行效果哦...如果,大家在开发原生模块遇到问题可以在本文下方进行留言,我看到了后会及时回复哦。 另外也可以关注我新浪微博,或者关注我Github来获取更多有关React Native开发技术干货。

2.3K51

快速创建React Native App

本文向大家分享如何快速构建React Native App以及在使用快速构建方案可能存在一些问题及解决方案。...运行React Native应用 想要将上述创建aa运行起来,你需要下载安装Exponent。 为了方便大家下载使用,我已将Exponent上传到网盘,供大家下载使用。...然后用Expo扫码屏幕上二维码,aa就可以运行在Expo上了。 ? 提示:为了确保Expo App能够正常访问到你PC,你需要确保你手机和PC处于同一网段内或者他们能够联通。...编辑App 经过上述步骤,快速开发React Native App环境就已经搭建好了,小伙伴门是不是迫不及待想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来在Expo上查看运行效果哦...如果,大家在开发原生模块遇到问题可以在本文下方进行留言,我看到了后会及时回复哦。 另外也可以关注我新浪微博,或者关注我Github来获取更多有关React Native开发技术干货。

2.5K10

​用expo,从0到1 轻松学react native

有没有一种办法可以躲过这些繁琐入门障碍呢? 有的! 需要借助两个工具: 1. create-react-native-app 2....Expo 好处就是: 不用再去配置烦人 iOS、Android 编译环境 可以用 Windows 开发 iOS 版 RN 应用。...一、手机安装Expo 二、电脑安装 create-nreact-native-app 终端控制台: $ npm install -g create-react-native-app 三、初始化一个rn项目...接下来使用 Expo 扫描这个二维码就可以打开你编写 RN 应用了。 并且只要在 Expo 打开过一次,就会在 App 中保留一个入口。 Expo相当于一个壳,你只需关注js层面的开发即可。...我体验了下, 很简单,就3步, 即可开始react native跨平台移动端开发!

3.6K60

Rn引入react-native-debugger调试开发

本项目是由expo搭建Rn项目 首先要在电脑安装react-native-debugger软件 下载地址:https://github.com/jhen0409/react-native-debugger.../releases/tag/v0.13.0 使用 先把项目在模拟器运行起来,会得到19000端口号 选择 Debugger/New Window,输入你端口号 项目快捷键m打开菜单...,选择Debug Remote JS,react-native-debugger就会自动连接上 查看network调用,可以直接右键选择Enable Network Inspect...也可查阅官方使用方法 https://docs.expo.dev/debugging/tools/#react-native-debugger 注意 目前react-native-debugger v0.13.0...目前只支持expo v47之前版本,expo v48是无法使用 https://github.com/jhen0409/react-native-debugger/issues/754 这是我项目的依赖版本

92510

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

尽管 React 和 Svelte 从 Vercel 成功获得了既得利益(核心团队成员在那里工作),但 Vue 仍然支持由社区驱动Nuxt项目。 甚至移动端也受到了影响。...正如我在今年早些时候发表“Things to look forward to in React Native”一文中提到,Szymon Rybczak 一直在为 React Native 开发Async...关于 SSR 在移动是否有意义仍然存在争议,但你总是可以期待 Evan Bacon 和 Nate Birdman 为各自立场做强有力辩护。...不过,我们是否会看到它在不使用 Node.js 后端公司中流行起来,还有待观察。 AI 在这个领域,很多人在努力寻找可以将 AI 作为前端工作流一部分方法。...如果你可以Expo Router 上构建免费得到原生移动应用,为什么要选择 Next.js 呢?这是 Sanket Sahu 提出一个很有说服力论点。

18300

React Native 并没有死!

最近React Native 备受打击,Google 发布了首个 Flutter 预览版、Vue.js 在 GitHub 上 star 数量超过了 React.js,而如今全球著名民宿预订平台...最近在线教育机构Udacity 移动团队也宣布其已经删除了应用中使用 React Native 编写所有功能。 ?...虽然厂商纷纷弃React Native而去,但我相信facebook不会轻言放弃,厂商离去反而会让facebook更好审视React Native优缺点,在这次大规模重构,解决厂商提出一些问题...目前 React Native 社区仍然很活跃,而且 Expo 等公司也做出了许多突破性库,如 react-native-gesture-handler 等。...React Native开发圈也将回归,持续更新,给大家推荐好用React Native组件和相关资讯,请大家继续关注支持React NativeReact Native开发圈!

92220
领券