在这篇文章中，我们将看到如何在React Native应用中创建和发送推送通知。 什么是推送通知？ 推送通知是从应用程序发送到已安装该应用的用户的消息或警报。...React Native 中的推送通知架构 在我们深入了解如何在 React Native 应用中实现推送通知的技术细节之前，理解React Native推送通知的工作原理可能会有所帮助。...React Native Firebase 库也提供了一种通过 FCM 在iOS上发送推送通知的方法。...演示：如何在 React Native 中设置推送通知 要在React Native应用程序中使用推送通知，我们首先需要注册应用程序以获取推送通知令牌。这个令牌是一个长字符串，可以唯一标识每个设备。...我们还学习了如何在 React Native 应用程序中发送推送通知，方法是添加通知令牌，从服务器发送它们，并使用 Expo 通知 API 在用户设备上显示它们。
在这篇指南中，我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。...要启动React Native CLI项目，请在终端中运行以下命令： npx react-native@latest init CustomFontCLI CustomFontCLI 是我们的项目文件夹的名称...让我们看看输出： 在Expo中使用自定义字体的React Native 在这一部分，我们将学习如何在Expo中使用自定义字体。...在我们的模拟器中看看这是什么样子： 使用自定义字体 假设你正在构建一个个人的 React Native 项目，并且你得到了一些自定义字体，这些字体并不在 Expo 支持的 Google 字体库中。...总结 如本文所探讨的，将自定义字体集成到React Native应用程序中不仅仅是技术上的提升，更是一种改善用户体验的策略性方法。
在这个教程中，我们将演示如何在React Native中构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOS和Android应用构建出色的欢迎界面。...此外，由于Expo很受欢迎，许多人常常选择使用它，我们也将探讨如何在Expo中构建启动屏幕。 什么是启动画面？ 启动画面是用户访问应用程序其余功能之前出现的第一个屏幕。...首先，使用下面的任一命令安装 react-native-splash-screen 包： /* npm */ npm i react-native-splash-screen --save /* yarn...将内容模式设置为“aspect fit”，如下所示： 更改iOS启动屏幕颜色 你可能会问的下一个问题是“我如何在 React Native 中更改启动屏幕的背景颜色？”...请参考下面的截图： 构建一个Expo启动屏幕 到目前为止，我们已经探讨了如何在一个裸 React Native 应用中构建启动屏幕。
---- React Native 环境 安装(必须按照以下3个要求配置安装，否则会环境错误) Python 2.x ， 必须安装2.x 的版本。...后来选择了EXPO，可真香。 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...光说不练 纯耍流氓，下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start 启动成功后，它会开启一个服务，会自动打开一个网页，在这个网页中...React Native 支持热更新 这样很方便我们开发APP 中调试， 数据改变， 视图同时改变。
” ---- React Native 环境 安装(必须按照以下3个要求配置安装，否则会环境错误) Python 2.x ， 必须安装2.x 的版本。...后来选择了EXPO，可真香。 ” 官方提供 脚手架 1. 全局安装脚手架 npm uninstall -g react-native-cli 2....创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO ★Expo是通用React应用程序的框架和平台。...” 光说不练 纯耍流氓，下面为EXPO 操作演示 创建项目 下载依赖会需要一段时间 EXPO 项目介绍 启动项目 yarn start ★启动成功后，它会开启一个服务，会自动打开一个网页，在这个网页中...” React Native 支持热更新 ★这样很方便我们开发APP 中调试， 数据改变， 视图同时改变。
安装 React Navigation 既然我们已经了解了什么是 React Navigation 以及它与 React Router Native 的关系，那么就让我们看看如何在应用程序中使用它。...注：在本文中，我们将在 React Native 应用程序中使用 Expo。...用这个启动应用程序： npx expo start 接下来，使用以下任一命令在 React Native 项目中安装 React Navigation 库： /* npm */ npm install...相反，我们使用了 npx expo install ，因为它会安装与我们的项目软件包兼容的依赖版本。...@react-navigation/drawer 包： 接下来，我们将使用 npx expo install 安装依赖项： npx expo install react-native-gesture-handler
我们在选择 flutter 和 React Native 的时候，需要考虑以下几个关键因素：团队成员的经验：如果你的团队已经熟悉 JavaScript 和 React，那么使用 React Native...Expo 快速研发 React Native App随着react native 诞生，以经历过一段不短时间的发展，有些 react native 配套的快速开发框架也随之出现，其中 expo 就是里面的翘楚...，我这两天也正是体验了一下 expo 研发一个 chatbox 的 App，有了一些体验，所以才整理输出一篇关于 expo 开发 react native 的小作文。...为了快速体验 expo 的魔力，我强烈建议，直接 clone 我的 project，：按照指引，本地启动之后，应该可以看到：我们手机上需要安装 expo app，打开这个 App，扫上面这个码，就可以调试我们的应用了...ui 组件库 react-native-elements ，该库提供了一个expo 框架的模板，我就是基于这个开始的，而且还是一个 typescript 的。相当省事。
与原生的调试工具相比，React Native Debugger 提供了更加完整的调试功能，可以方便地查看应用中的状态和调用栈信息。...通过使集成 SDK 的形式，开发者可以在 React Native 应用快速运行微信小程序、支付宝小程序等，同时利用小程序的生态优势，如丰富的 API 和庞大的用户群体。...9、Expo Expo 是一个开发平台，提供了许多开箱即用的组件和 API，可以帮助开发者更快速地开发 React Native 应用。...Expo 的使用非常简单，只需要安装 Expo CLI，就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用，可以大大提高开发效率和代码质量。
去年终于引来了 React Native 的新版本 0.70.0，开发者也大为振奋。React Native 作为一种跨平台移动应用开发框架，在持续的演进中也不断涌现出新的技术和工具。...与原生的调试工具相比，React Native Debugger 提供了更加完整的调试功能，可以方便地查看应用中的状态和调用栈信息。...通过使集成 SDK 的形式，开发者可以在 React Native 应用快速运行微信小程序、支付宝小程序等，同时利用小程序的生态优势，如丰富的 API 和庞大的用户群体。...Expo 的使用非常简单，只需要安装 Expo CLI，就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用，可以大大提高开发效率和代码质量。
确保node版本在12以上 node -v 安装expo npm i -g expo-cli 在你的手机上下载应用 Expo Client https://expo.io/tools 打开vs code...安装以下插件 React Native Tools React-Native/React/Redux snippets for es6/es7 Prettier - Code formatter...Material Icon Theme 初始化项目 expo init react-native-demo 选择第一个选项 blank
Quick Start是在v0.4.5版本添加的一种快速创建React Native App的方案，旨在为React Native开发者提供一种快捷的，无需配置任何工具，同时也无需安装XCode与AndroidStudio...本文向大家分享如何快速构建React Native App以及在使用快速构建方案中可能存在的一些问题及解决方案。...第一步：安装create-react-native-app create-react-native-app是React 社区孵化出来的一种无需构建配置就可以创建RN App的一个开源项目。...作为一个创建react native应用的脚手架工具，你可以通过如下命令完成安装： npm install -g create-react-native-app 接下来就可以通过create-react-native-app...如果，大家在开发原生模块中遇到问题可以在本文的下方进行留言，我看到了后会及时回复的哦。 另外也可以关注我的新浪微博，或者关注我的Github来获取更多有关React Native开发的技术干货。
由于最近又要开始react native的开发，所以重新翻了下官方文档，发现rn已经迭代到46版本了，安装最新的版本，还需要额外的第三方编译库，还用上了yarn。...需要借助两个工具： 1. create-react-native-app 2....一、手机安装Expo 二、电脑安装 create-nreact-native-app 终端控制台： $ npm install -g create-react-native-app 三、初始化一个rn项目...接下来使用 Expo 扫描这个二维码就可以打开你编写的 RN 应用了。 并且只要在 Expo 中打开过一次，就会在 App 中保留一个入口。 Expo相当于一个壳，你只需关注js层面的开发即可。...我体验了下， 很简单，就3步， 即可开始react native跨平台移动端开发！
Expo Expo 是基于 React Native 并整合大量常用的 native module(Expo SDK)，像原生的功能如相册，相机，蓝牙等功能，在 expo 都是直接集成的，相当于封装原生的...此外 Expo 还提供了 Expo Go App，只需要在你的移动端设备中安装它，启动开发服务器并生成 QR 码。...node_modules 与 .expo 文件夹，重新安装依赖即可。...React Navigation 在这个库你可以实现几乎所有的原生布局，如底部 tabs，左侧抽屉等，expo 是在此基础上进行包装的。...但在 expo 中有 react-native-pager-view作为平替，并且更兼容原生，但是 react-native-pager-view 是不支持 Web 端的，因此如何选择就看具体需求了。
在expo下使用react-native-fast-image组件 import FastImage from 'react-native-fast-image' const Imagegallery...FastImage.resizeMode.contain} /> ) 在IOS下运行会报错：requireNativeComponent: "FastImageView" was not found in the UIManager in react...native 报错的原因是react-native-fast-image组件依赖的原生组件并没有包含在react-native里，使用前需要进行预构建。...解决方案： 执行下面的命令，预构建ios pod原生代码： npx expo prebuild -p ios --clean 也可以不用后面的参数，直接prebuild，将安卓的原生代码库也一起安装上...npx expo prebuild 然后启动expo代码 npx expo run:ios 经过漫长的等待，应该就能正常运行了。
当工作中涉及到 react-native（后文简称：RN）应用的内容时，发现 umi 暂时没有支持RN的打算。...概览 NPM 包 简介 umi-plugin-antd-react-native 为@ant-design/react-native提供按需加载，主题定制、预设、切换，国际化支持，在expo中链接字体图标...React Native CLI expo haul 推荐在.gitignore文件末尾，追加以下内容： # umi-react-native tmp index.js metro.config.js...如果你的 RN 工程安装了多种开发工具，则必须通过 umi 配置指定当前使用哪一个： 使用expo： // .umirc.js export default { expo: true, haul...* AsyncStorage 将来会从 react-native 库中移除。
开发React-native程序，除了官方提供的React-native CLI外，目前还有一个新的选择Expo。Expo通过编写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
本项目是由expo搭建的Rn项目 首先要在电脑安装react-native-debugger软件 下载地址：https://github.com/jhen0409/react-native-debugger...使用 先把项目在模拟器运行起来，会得到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 这是我项目的依赖版本
在查看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...@3.3.2 使用 在项目App.js中安装需要进行全局配置 import AppNavigation from "....其它值表示该主题色的深度值 获取其它的深度值，可以访问https://www.colorhexa.com/index.php 引入些组件查看效果 import { useState } from 'react
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
