文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

可以通过统一的库API轻松接收远程通知并显示本地通知。...演示：如何在 React Native 中设置推送通知 要在React Native应用程序中使用推送通知，我们首先需要注册应用程序以获取推送通知令牌。这个令牌是一个长字符串，可以唯一标识每个设备。...获取推送通知令牌 记住，要在React Native应用程序中使用推送通知，我们首先需要注册应用程序以获取推送通知令牌。在这里，我们将使用Expo中的通知API。...的函数，以确保它只被调用一次。...我们还学习了如何在 React Native 应用程序中发送推送通知，方法是添加通知令牌，从服务器发送它们，并使用 Expo 通知 API 在用户设备上显示它们。

11.2K10

1000千米高空俯瞰 React Native

一.历史：React Native 从开始到现在 React Native 的定位是通过 React 构建原生 App： A framework for building native apps with...native：通过 JavaScript 调用 Native API 不利用低成本的 WebView 方案跨平台，是因为受限于 Web 技术，体验无法与 Native 相提并论，最终因性能和扩展性没有达到预期而作罢...，因为 Native 还是纯 Native 相比之下，React Native 通过 JavaScript 调用 Native API 是一个两全其美的方案，既能让 Native 用上 React（及...JavaScript 的繁荣生态），也能拥有 Web 的开发速度，因为写的和实际执行的都是 JavaScript，Native 仅提供视图渲染能力及平台特定能力 发展历程 React Native 诞生于...Native API 集成 批处理：很难让 React Native 应用调用 Native 实现的函数 可序列化：存在不必要的 copy，而不是直接共享内存 这些问题在 Native + React

1.6K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React Native年度报告(2017-2018)

    通过本文希望能帮助你快速的了解React Native在过去一年中的重要更新，如何让你的APP去更快的应用React Native新的特性，让React Native新的组件及特性来提高你应用的性能与体验...说明 新增组件说明 组件 最低支持版本 说明 CheckBox 0.49 一个用在React Native上的复选框组件，(目前仅支持Android，未来会对iOS...findNodeHandle 0.45 用于获取组件的本地节点句柄的API。 TVEventHandler 0.43 一个用于接受Apple TV远程事件(如遥控器的事件)的API。...YellowBox 0.44 通过这个API可以屏蔽指定的警告。...使用react-navigation代替； 以上便是同时React Native 2017-2018的年度报告，另外你也可以通过学习《React Native实战课程》来获得React Native

    3.5K60

    技术 | 从零开始，实现你的小程序

    从微信发布的小程序这样的应用形态中，才发现渲染Native（React Native，Weex）并不一定是最优的利用Web能力的解放。...在这里我们不讨论微信小程序的应用实现，而是从零开始，让你来设计一个小程序的核心架构，该如何实现？通过分析微信小程序，我们大概需要实现哪些？ 如图： ?...当然除了逻辑之外，你想调用客户端能力的API也需要这样的通信来处理。 既然小程序的应用特点是一个App，那么从App的特征上来看，你需要实现的核心框架是App，Page，Navigate三个类。...中的return React.createElement而是Native.createElement，将你的描述对象，比如style，view type通过Native.createElement方法发送给...那么在Page逻辑类中，你调用了setData方法来更新视图，该如何做呢？通过bridge将数据发送给WKWebView，wk中的某个方法接收到了之后，启动diff，重新生成vdom，最后来更新视图。

    1.2K30

    【Web技术】839- React Native 原理与实践

    原生体验 由于 React Native 提供的组件是对原生 API 的暴露，虽然我们使用的是 JavaScript 语言编写的代码，但是实际上是调用了原生的 API 和原生的 UI 组件。...框架的目标就是解释运行这个 JS 脚本文件，如果是 Native 拓展的 API，则直接通过 bridge 调用 Native 方法，最基础的比如绘制 UI 界面，映射 Virtual DOM 到真实的...就能获取到，并运行 JS 的代码。...JS 调用 Native 当 JS 调用 Native 模块的时候，会调用一个 Native 暴露出来的全局方法：nativeFlushQueueImmediate，并通过传入要调用的 moduleName...在浏览器里面，JavaScript 可以调用 DOM API 去完成创建 UI 的工作，而在 React Native 里面，是通过 UI Manager 来创建视图的，基于 Virtual DOM ，

    3.1K10

    React Native跨平台开发2017 年终总结

    其发布的版本即频率如下图： 可以看到，在这一年中，React Native更新的内容如下： 仅针对 Android： 新特性 218 个、修复 bug 79 个 ； 仅针对 iOS...CheckBox：一个用在React Native上的复选框组件，(目前仅支持Android，未来会支持iOS) ImageBackground：背景图片组件，它是一个容器组件，支持包含其他组件 VirtualizedList...BackHandler：监听设备上的后退按钮事件(Android、Apple TV)。 findNodeHandle：用于获取组件的本地节点句柄的API。...TVEventHandler： 一个用于接受Apple TV远程事件(如遥控器的事件)的API。 YellowBox：通过这个API可以屏蔽指定的警告。...废弃组件及API 随着React Native版本的更新，React Native废弃了一些过时的API和组件。

    3.7K70

    React Native iOS原生模块开发实战|教程|心得

    上面是我翻译React Native官方文档上的一段话，大家如果想看英文版可以点这里：Native Modules 在这篇文章中呢，我会带着大家来开发一个从相册获取照片并裁切照片的项目，并结合这个项目来具体讲解一下如何一步步开发...原生模块开发实战 在这里我们就以开发一个从相册获取照片并裁切照片的实战项目，来具体讲解一下如何开发React Native iOS原生模块的。...@end 查看视频教程 在ImageCrop类中，我们调用了Crop类来实现从iOS相册中获取图片并裁切图片的功能，在调用Crop的时候我们用的是懒加载的方式。为什么要用懒加载呢？...接下来我们就来看下一JS是如何向原生模块传递数据的？ JS向原生模块传递数据： 为了实现JS向原生模块进行传递数据，我们可以直接通过调用原生模块所暴露出来的接口，来为接口方法设置参数。...： 原生模块向JS传递数据我们可以借助Callbacks与Promises，接下来就讲一下如何通过他们两个进行数据传递的。

    2.5K60

    react native入门实战（一）

    ： 如何在mac IOS下进行react native环境配置 写一个简单的例子，分析react native布局与web布局的不同点 如何在Xcode上进行编译以及在IOS真机上运行 首屏加载一些简单的优化方法...安装此工具可以提高开发时的性能 brew install watchman React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载...设置宽度式不需要单位{width:10}，其实React-Native是基于pt为单位的，可以通过Dimension来获取宽高； React-Native是基于flex来布局的，view的默认宽度为100%...，水平居中用alignItems，垂直居中用justifyContent; React-Native通过Image.resizeMode来适配图片布局，它包括contain,cover和stretch三种模式...如果我们默认不设置模式那么图片布局就是使用的cover模式，图片会直接铺面容器并做一定的截取； contain模式会自适应图片宽高； stretch模式会铺面容器，并且进行图片拉伸 react-native

    8.7K70

    react native 入门实战（一）

    作者：朱灵子 本文举一个简单的例子介绍如何进行react native实战开发，主要从以下几个方面来进行介绍： 如何在mac IOS下进行react native环境配置 写一个简单的例子，分析react...安装此工具可以提高开发时的性能 brew install watchman React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载...，设置宽度式不需要单位{width:10}，其实React-Native是基于pt为单位的，可以通过Dimension来获取宽高； React-Native是基于flex来布局的，view的默认宽度为100%...，水平居中用alignItems，垂直居中用justifyContent; React-Native通过Image.resizeMode来适配图片布局，它包括contain,cover和stretch三种模式...如果我们默认不设置模式那么图片布局就是使用的cover模式，图片会直接铺面容器并做一定的截取； contain模式会自适应图片宽高； stretch模式会铺面容器，并且进行图片拉伸 react-native

    9.8K00

    react native入门实战（一）

    ： 如何在mac IOS下进行react native环境配置 写一个简单的例子，分析react native布局与web布局的不同点 如何在Xcode上进行编译以及在IOS真机上运行 首屏加载一些简单的优化方法...安装此工具可以提高开发时的性能 brew install watchman React Native目前需要Xcode 7.0 或更高版本,可以通过App Store或是到Apple开发者官网上下载...设置宽度式不需要单位{width:10}，其实React-Native是基于pt为单位的，可以通过Dimension来获取宽高； React-Native是基于flex来布局的，view的默认宽度为100%...，水平居中用alignItems，垂直居中用justifyContent; React-Native通过Image.resizeMode来适配图片布局，它包括contain,cover和stretch三种模式...如果我们默认不设置模式那么图片布局就是使用的cover模式，图片会直接铺面容器并做一定的截取； contain模式会自适应图片宽高； stretch模式会铺面容器，并且进行图片拉伸 react-native

    8K20

    全网最详！暗黑模式在 Trip.com App 的实践

    三、实现方案 Trip.com App 使用原生系统与 React Native 混合开发的模式。...3.3 ReactNative 3.3.1 适配方案 RN 桥接 Native 端，通过直接获取和动态监听两种方式获取 Native 端的主题变化。...1）从 Native 端获取当前的 theme 值 使用 Native Modules 的同步方法在 JS 端获取当前 theme 值，JS 端方法调用能直接得到 Native 同步方法的返回值，而非一个...，获取theme值: 通过IBUThemeProvider.theme 读取全局theme。...在各端仅投入一位研发人员的情况下，在两周内完成了从方案制定到方案落地，并推进产线接入。 Trip.com一直致力于追随前沿新特性，带给用户最好的体验，让用户更舒适，旅行从此简单。 ?

    2.3K20

    从Hybrid到React-Native: JS在移动端的南征北战史

    只要你动了这三个方法，它们传递的数据就会被外部的WebChromeClient拦截和获取，这就为JS调Android的代码提供了一种方便的渠道。哎呀，三个方法这么多选哪个呢？...的WebChromeClient控件这个类，它有个shouldOverrideUrlLoading这个方法，这个方法可以把控件内部网页的JS的Url请求给拦截了，当然了，你写在Url中的数据也同时被一并获取了...android测量/布局/绘制 JS线程：执行JS/React代码，进行API调用，处理触摸事件等，对视图的更新被进行批处理，并在事件循环结束时发送给UI线程 Shadow线程：处理虚拟DOM...Shadow线程进行计算，并最终将计算结果得到的布局参数传递给主线程（UI线程），实现UI的构建 RN中的Bridge做了什么？ && RN线程如何交互？...RN的Web化:react-native-web react-native-web 组件的内部，会把 React Native 的 API 映射成了浏览器支持的 API。

    4K10

    React Native Android原生模块开发实战|教程|心得

    上面是我翻译React Native官方文档上的一段话，大家如果想看英文版可以点这里：Native Modules 在这篇文章中呢，我会带着大家来开发一个从相册获取照片并裁切照片的项目，并结合这个项目来具体讲解一下如何一步步开发...原生模块开发实战 在这里我们就以开发一个从相册获取照片并裁切照片的实战项目，来具体讲解一下如何开发React Native Android原生模块的。...接下来我们就来看下一JS是如何向原生模块传递数据的？ JS向原生模块传递数据： 为了实现JS向原生模块进行传递数据，我们可以直接通过调用原生模块所暴露出来的接口，来为接口方法设置参数。...： 原生模块向JS传递数据我们可以借助Callbacks与Promises，接下来就讲一下如何通过他们两个进行数据传递的。...Callbacks 原生模块支持一个特殊类型的参数-Callbacks，我们可以通过它来对js进行回调，以告诉js调用原生模块方法的结果。

    2.4K40

    Thoughtworks 第27期技术雷达——语言和框架象限选编

    React QueryReact Query 通常被描述为 React 缺失的数据获取库。...获取，缓存，同步和更新服务器状态是许多 React 应用程序常见的需求，尽管这些需求易于理解，但众所周知，正确地实现这些需求非常困难。...它的开发者工具也能帮助刚接触此框架的开发人员理解其工作原理，遗憾的是，其开发者工具尚不支持 React Native。对于 React Native，你可以使用第三方开发者工具插件 Flipper。...评估 Astro令人难以置信的是，即使到了2022年，开发者社区仍在持续推出有趣的，用于构建 web 应用程序的新框架，Astro 就是最新推出的开源，多页面响应的应用程序框架，它可以在服务器上渲染页面并尽可能减少通过网络发送的...虽然这个 SDK 和可获取的数据源还不是很全面，但是我们相信是时候开始探索如何能让我们的系统具有碳意识了。 跨设备 SDK随着智能设备持续融入我们的生活，我们开始看到跨越多个设备的新用例出现。

    97510

    87.精读《setState 做了什么》

    但是 setState 函数是 react 包导出的，他们又是如何与 react-dom react-native react-art 这些包结合的呢？...也就是说，react 包定义了标准的状态驱动模型的 API，而 react-dom react-native react-art 这些包是在各自平台的具体实现。...这说明了 react 包仅告诉你 React 拥有哪些语法，而并不关心如何实现他们，所以我们需要结合 react 包与 react-xxx 一起使用。...props, updater 无法被直接调用，因为这个 API 是由 react 引擎在 setState 时调用的： // A bit simplified setState(partialState...React 是如何实现这个 magic 的？ 通过这个疑问，我们了解了 React 更上层的抽象能力，如何用一个包制定规范，用 N 包去实现它。

    1K20

    Kotlin vs Swift：现代移动开发的“双子星”全面对比

    iOS、macOS、watchOS、tvOS 应用开发，服务器端 Swift 运行环境 JVM、JavaScript（Kotlin/JS）、Native（Kotlin/Native） Apple 平台原生...实验性）、inline class（已弃用） struct, enum（第一公民） 复制行为 对象默认引用传递 struct 值传递，class 引用传递 对比： Swift 的 ARC 在编译期优化内存访问...通过条件编译（#if os(...)）处理多平台差异。 对比： Kotlin 更适合跨平台共享逻辑；Swift 更适合深度集成 Apple 生态。...尽管受到 Flutter（Dart）和 React Native（JavaScript）冲击，Kotlin 与 Swift 仍是原生开发的事实标准。 十、总结 1....如何选择 场景 推荐语言 理由 开发 Android 应用 ✅ Kotlin 官方首选，生态成熟，Jetpack Compose 支持良好 开发 iOS/macOS 应用 ✅ Swift Apple 官方语言

    40510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券