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

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

主要有两种类型的通知: 前台通知:当应用程序正在打开并运行时发送给用户的通知 后台通知:无论应用程序是否当前打开,都会发送 推送通知在移动应用开发世界中非常流行,原因很多。...这里一个图表,简化了通知服务如何与设备进行通信: 当涉及到在React Native中设置推送通知时,几种设置方式: 原生平台特定的通知服务(FCM/APNS) Expo推送通知服务和其他云服务 像...接下来,我们检查是否已授予权限。如果没有,我们会显示一个关于错误的警告,并立即从函数中 return 。如果令牌请求过程成功,我们将从函数中返回令牌。...然后我们用以下命令启动我们的开发服务器: npm start 如果你将电脑和移动设备保持在同一网络中,你可以在React Native应用中看到一些预先包含的列表。...我们还学习了如何在 React Native 应用程序中发送推送通知,方法是添加通知令牌,从服务器发送它们,并使用 Expo 通知 API 在用户设备上显示它们。

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

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

在该文件夹内,一个静态文件夹,所有的TTF文件都在其中。复制并保留这些TTF文件。 在下一部分,我们将会讲解如何将这些字体的TTF文件集成到我们的React Native CLI项目中。...本质上,我们正在渲染 JSX 与四个文本以显示在屏幕上,并使用 React Native 的 StyleSheet API 为每个 Text 组件附加不同的 fontFamily 样式。.../raleway @expo-google-fonts/quicksand 如果你其他想要使用的Google字体,你可以在这里查看Expo支持的可用字体。...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库中。...在React Native中使用自定义字体时常见的陷阱 在React Native中使用自定义字体时,你可能会遇到一些缺点: 字体族名称不匹配:如前文所述,确保字体族名称一致性至关重要。

30810

几个好用的React-Native 开发工具

使用 Hermes 引擎需要对 React Native 进行一些配置,但相信这个小小的工作量会换来更加流畅的用户体验。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools 中调试应用。...另外,React Native CLI 还提供了一些常用的命令,比如 run-ios、run-android 等,可以方便地启动应用并在模拟器或设备上运行。...另外,Expo 还提供了一些常用的组件和 API,比如 Camera、Location、Push Notification 等,可以方便地进行开发。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

2.1K10

React Native 开发心得分享

一段时间没更新了,花了点时间研究了下 React Native(后续用 RN 简称),同时也用该技术作为我的毕设项目(一个校园社交应用,仿小红书),经过了这段时间的疯狂折腾,对 RN 生态了一定的了解...是否必要学 react-native?​ 先说一个结论:RN ≠ 原生,别指望会个 react 就能写出靠谱的原生应用。...ExpoExpo 是基于 React Native 并整合大量常用的 native module(Expo SDK),像原生的功能如相册,相机,蓝牙等功能,在 expo 都是直接集成的,相当于封装原生的...总之如今开发 RN 请毫不犹豫的使用上 Expo。 开发中遇到的一些坑点​ 实际开发中所遇到的坑点远不止下述所说,这里只列举几个相对代表,坑比较深的点。甚至很多坑都不是前端方面的知识了。...但在 expo 中有 react-native-pager-view作为平替,并且更兼容原生,但是 react-native-pager-view 是不支持 Web 端的,因此如何选择就看具体需求了。

11310

React Native 开发工具推荐

这些新的技术和工具不仅可以提高 React Native 应用的性能和开发效率,还可以帮助开发者更好地应对不同的开发场景和需求。本文将介绍 React Native一些新的技术和工具。...使用 Hermes 引擎需要对 React Native 进行一些配置,但相信这个小小的工作量会换来更加流畅的用户体验。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools 中调试应用。...另外,Expo 还提供了一些常用的组件和 API,比如 Camera、Location、Push Notification 等,可以方便地进行开发。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

1.7K20

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

这些新的技术和工具不仅可以提高 React Native 应用的性能和开发效率,还可以帮助开发者更好地应对不同的开发场景和需求。本文将介绍 React Native一些新的技术和工具。...使用 Hermes 引擎需要对 React Native 进行一些配置,但相信这个小小的工作量会换来更加流畅的用户体验。...另外,React Native Debugger 还提供了一个 RNDebugger Chrome 插件,可以让开发者更方便地在 Chrome DevTools 中调试应用。...另外,Expo 还提供了一些常用的组件和 API,比如 Camera、Location、Push Notification 等,可以方便地进行开发。...当然,React Native 社区中还有许多其他优秀的工具和框架,我就罗列了一些自己相对于比较熟悉的工具和技术,这些工具和技术都可以在 React Native 应用开发过程中发挥重要作用,提高开发效率和代码质量

1.7K20

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

React Native 之旅 React Native 踩坑开始 5.1 假期 就这样短暂的结束了,你都干啥了? ,我嘛加了3天班,你们呢?...最近公司React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...后来选择了EXPO,可真香。 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件 ​ 下载APK 显示效果 到此该结束了 本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用,

4K00

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

React Native 之旅 React Native 踩坑开始 ★5.1 假期 就这样短暂的结束了,你都干啥了? ,我嘛加了3天班,你们呢?...最近公司React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...后来选择了EXPO,可真香。 ” 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPOExpo是通用React应用程序的框架和平台。...” 打包成功,它会提供一个链接,去这个链接你就可以下载打包后的APK 文件 下载APK 显示效果 到此该结束了 ★本章介绍了,如何配置React Native 环境, 以及EXPO 神器如何使用

3.1K30

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

我们在选择 flutter 和 React Native 的时候,需要考虑以下几个关键因素:团队成员的经验:如果你的团队已经熟悉 JavaScript 和 React,那么使用 React Native...Expo 快速研发 React Native App随着react native 诞生,以经历过一段不短时间的发展,有些 react native 配套的快速开发框架也随之出现,其中 expo 就是里面的翘楚...,我这两天也正是体验了一下 expo 研发一个 chatbox 的 App,一些体验,所以才整理输出一篇关于 expo 开发 react native 的小作文。...一个小插曲,此时,我们发现 expo 的库了更新,你可以选择忽略,但还是建议你执行npx expo install --fix去更新下,一般expo 是因为修复某些 bug,版本会相对来讲更加稳定,...ui 组件库 react-native-elements ,该库提供了一个expo 框架的模板,我就是基于这个开始的,而且还是一个 typescript 的。相当省事。

47400

Rn引入NativeBase组件库并自定义主题色

在查看expo文档的时候,发现它推荐了好几款组件库,我全部查看了一遍后,觉得NativeBase是比较好用的,且一直都在维护中,所以决定引入查看效果 https://docs.expo.dev/ui-programming.../user-interface-libraries/ 安装 NativeBase官方文档 我项目是用expo搭建的 安装NativeBase及其依赖,也可根据自己的项目来安装插件安装 yarn...add native-base npx expo install react-native-svg@12.1.1 npx expo install react-native-safe-area-context.../src/navigation/appNavigation" import { extendTheme, NativeBaseProvider } from "native-base" export...其它值表示该主题色的深度值 获取其它的深度值,可以访问https://www.colorhexa.com/index.php 引入些组件查看效果 import { useState } from 'react

64550

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

这时可以打开手机端的 Expo 客户端,扫描这个二维码,就会显示 App 的页面。注意,计算机和手机必须在同一个局域网。...(3)React Native 的问题 React Native 的想法虽然很美好,但是实际开发中出现了各种各样的问题。...React Native 的底层还是没有做到无缝适配,它至今没有发布 1.0 版(2019年底是 0.61 版),这多多少少也说明了一些问题。...如果你想用 React Native 做到 iOS 和安卓体验一致,并且充分发挥原生控件的功能,就需要同时熟悉 React Native、iOS、安卓三个平台,这对开发者的要求实在太高了。...Airbnb 公司在使用 React Native 两年后,宣布放弃,改用原生技术栈。他们写了一篇很长的文章,解释为什么这么做,React Native 到底什么问题,大家可以参考那篇文章。

6.6K41

使用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...:8081/也可以按 i 启动IOS虚拟机(前提是你已经安装了xcode和IOS虚拟机),启动IOS虚拟机后expo会首先给你安装Expo Go,如下图所示:安装好后就可以正式进入app了,效果如下:expo...支持热更新,编辑保存后会立即rebuild并立即显示到模拟器上。

34010
领券