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

使用Expo开发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

3.5K10

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

然后，将你之前从静态文件夹中复制的所有TTF文件粘贴到你的项目的 fonts 文件夹中： 接下来，在根目录中创建一个 react-native.config.js 文件，并将下面的代码粘贴到其中： 将字体链接到要在项目文件中使用...让我们看看输出： 在Expo中使用自定义字体的React Native 在这一部分，我们将学习如何在Expo中使用自定义字体。...首先，通过运行此命令创建一个新的Expo项目： npx create-expo-app my-app 一旦项目成功安装，通过运行 npm run start 启动开发服务器，并选择iOS 或 Android...在我们的模拟器中看看这是什么样子： 使用自定义字体 假设你正在构建一个个人的 React Native 项目，并且你得到了一些自定义字体，这些字体并不在 Expo 支持的 Google 字体库中。...在React Native中使用自定义字体时常见的陷阱 在React Native中使用自定义字体时，你可能会遇到一些缺点： 字体族名称不匹配：如前文所述，确保字体族名称一致性至关重要。

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

    React Native 导航：示例教程

    这意味着，使用过 React Router 的 Web 开发人员会发现，使用 React Router Native 也很容易。...这是一大优点，因为这意味着学习这两个框架的难度都不大。 如果你来自Web 开发背景，我会推荐使用 React Router Native，因为它的使用方式与 React Router 相同。...相反，我们使用了 npx expo install ，因为它会安装与我们的项目软件包兼容的依赖版本。...我建议您始终使用该命令来安装依赖包，因为 npm 和 yarn 将始终安装最新版本，而最新版本可能与您的项目不兼容。缺点是可能会出现生产级别的错误。...要使用抽屉导航，请首先使用以下任一命令安装 @react-navigation/drawer 包： 接下来，我们将使用 npx expo install 安装依赖项： npx expo install

    4.7K10

    React Native 项目 Web 端同构初探

    “使用 JavaScript 来开发移动端 App 似乎是众多小厂比较普遍的选择，作为拷贝经验丰富的 Copy 工程师，我所在的小作坊采用的是 React Native。...当然值得注意的是，官方文档明确表示不支持 React Native 中不推荐使用的组件和 API，因此如果您项目中的某些功能依赖第三方库，可能那部分的功能在 web 端同构时需要额外处理。...expo-cli web 而我们实际开发中可能用 react-native-cli脚手架来构建项目比较多些，那么如何引入 react-native-web呢？...我们先初始化项目： npx react-native init rn_web # 当然也可以使用模板，如 # npx react-native init rn_web --template react-native-template-typescript...当然，如果您希望将本不同端的代码都保存在一个index.js文件中，则可以使用import { Platform } from 'react-native'来按照条件区分不同平台的代码。

    4.8K30

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

    要将项目的源代码下载到你的电脑中，请在你的终端运行以下命令： git clone https://github.com/codezri/Done-With-It-App.git 接下来，我们将安装项目所需的依赖项...，并启动React Native开发服务器： yarn install yarn start 上述命令安装依赖项并启动Expo开发服务器，因此你可以通过在Android或iOS上使用Expo应用来测试你的应用程序...请注意，在这里，我没有设置 FCM 就收到了我的 Android 设备的通知，因为我在使用 Expo 应用进行开发。...使用Expo发送本地通知 在某些情况下，开发者不需要远程服务器来发送通知。一个例子可以是音乐播放器，当一首歌曲正在播放时，应用需要显示一个通知。 在某些情况下，开发者不需要远程服务器来发送通知。...解决设置推送通知时的常见问题 开发人员在使用 Expo 通知和 Notifee 时常常会遇到一些常见的问题。

    9.6K10

    Expo与Flutter：如何选择合适的移动框架

    唯一的缺点是，在构建看起来像原生 iOS 应用程序的应用程序时，使用 Material Design 组件 比较困难（尤其是针对两个平台的自适应样式）。...这意味着您可以轻松找到可以参与您的 Expo 项目的开发人员，并且学习时间最短。 另一方面，Flutter 是一种更利基的技术，仅仅因为 Dart 是一种利基语言，而 JavaScript 则更通用。...您需要帮助找到可以参与您的 Flutter 项目的开发人员，因为 Dart 实际上只用于 Flutter 项目。 如果您想组建一个开发人员团队来支持您的应用程序多年，请选择 Expo。...如果您希望获得最佳支持来构建、测试和部署您的应用程序，并使用与 GitHub 等工具集成的强大自动化功能，您应该选择 Expo。 10. 您是否想要一项具有活跃社区的未来安全技术？...即使 Meta 停止开发 React Native，社区也会继续开发和维护 React Native。 如果您想选择一项具有活跃社区的未来安全技术，请选择 Expo。

    2.5K10

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

    创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...创建项目 expo init my-project ​ EXPO 提供了 很方便开发便捷 从项目的开发 到 最终的上线， 都很轻松。...当你想打包你的App 成APK 文件： 你可以是使用EXPO 提供的 指令： expo build:android 打包的时候，会需要EXPO的账户， 因为它会发布到你EXPO账户下，生成APK 文件...是不是很轻松哈，使用官方提供的，你的自己配置，查找模拟器。 React Native 支持热更新 这样很方便我们开发APP 中调试， 数据改变， 视图同时改变。...打包成功，它会提供一个链接，去这个链接你就可以下载打包后的APK 文件 ​ 下载APK 显示效果 到此该结束了 本章介绍了，如何配置React Native 环境， 以及EXPO 神器如何使用，

    5.9K00

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

    创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO ★Expo是通用React应用程序的框架和平台。...创建项目 expo init my-project EXPO 提供了 很方便开发便捷 ★从项目的开发 到 最终的上线， 都很轻松。...当你想打包你的App 成APK 文件： 你可以是使用EXPO 提供的 指令：expo build:android 打包的时候，会需要EXPO的账户， 因为它会发布到你EXPO账户下，生成APK 文件...是不是很轻松哈，使用官方提供的，你的自己配置，查找模拟器。 ” React Native 支持热更新 ★这样很方便我们开发APP 中调试， 数据改变， 视图同时改变。...” 打包成功，它会提供一个链接，去这个链接你就可以下载打包后的APK 文件 下载APK 显示效果 到此该结束了 ★本章介绍了，如何配置React Native 环境， 以及EXPO 神器如何使用

    4.6K30

    React Native 列表组件：FlashList、FlatList 及更多

    在移动开发中，高效展示数据列表至关重要。作为 React Native 开发者，我们可以使用多种强大的工具来完成这一任务。...本文将带你回顾 React Native 列表组件的演进过程，探讨 ScrollView 的局限性，以及 FlatList、SectionList 的优化点，并深入了解最新的 FlashList 如何进一步提升性能和开发体验...它采用虚拟化渲染技术，只渲染当前屏幕内可见的列表项，而屏幕外的项会被移除，从而大幅节省内存并提高渲染效率。...FlashList FlashList 由 Shopify 开发，针对大规模数据列表进行了极致优化。它不仅保留了 FlatList 的 API 设计，还提升了渲染速度，适用于超大数据集的高性能渲染。.../flash-list # 使用 expo npx expo install @shopify/flash-list 示例如下： import { FlashList } from '@shopify

    1.7K00

    在React Native中构建启动屏

    此外，由于Expo很受欢迎，许多人常常选择使用它，我们也将探讨如何在Expo中构建启动屏幕。 什么是启动画面？ 启动画面是用户访问应用程序其余功能之前出现的第一个屏幕。...可以说，启动画面是让您的移动应用的品牌名称和图标深入用户记忆的最佳方式。 在网络应用中，我们使用预加载器为用户提供动画娱乐，同时服务器操作正在处理中。...*/ yarn add react-native-splash-screen 为iOS构建一个启动屏幕 在你的终端中，使用下面的命令链接依赖项： cd ios // to enter into IOS...使用 Expo，我们可以以简化和直接的方式做到这一点，因为 Expo 允许我们在 app.json 文件中配置我们的启动屏幕和图片。 我们将使用上述的 App.js 和 Login.js 文件。...为了做到这一点，我们将使用 expo-splash-screen 包，我们可以用以下命令来安装： npx expo install expo-splash-screen 接下来，在我们的 App.js

    7.1K10

    React Native 开发心得分享

    从开发角度而言，尤其还是对于前端开发人员，会 JS 且搞过 React ，那 RN 上手就十分友好，最起码有关 React 社区的逻辑库或状态库是可以使用的。...此外 Expo 还提供了 Expo Go App，只需要在你的移动端设备中安装它，启动开发服务器并生成 QR 码。...总之如今开发 RN 请毫不犹豫的使用上 Expo。 开发中遇到的一些坑点​ 实际开发中所遇到的坑点远不止下述所说，这里只列举几个相对有代表，坑比较深的点。甚至有很多坑都不是前端方面的知识了。...，想要实现则需要使用 expo-blur 这个库。...这两个库的区别​ 从 Web 开发使用的角度，nativewind 会更好用一些， npm 实际使用量也确实比 twrnc 来的多，但要在一些情况下，比如给第三方组件更改 props 的样式情况下就会没有

    2.4K31

    为你的圣诞灯构建一个应用程序

    物联网不在互联网上 将你和你的家连接到互联网的产品并不短缺。每一个都会有一个WiFi设备连接到您的网络，以及另一组麦克风，每个麦克风都会在您的家中监听它们的特殊触发字。...但Expo(https://expo.dev/)让在手机上运行代码成为了一种很棒的体验。它们通过应用程序和命令行自动构建并推送到您的手机上。...每次使用 Z-Wave 时，我都会忘记 Z-Wave 网络模型如何工作的细节。...因为我使用的是 IPython，所以我还可以通过选项卡浏览每个对象以查看可用的函数。 但是您如何知道每个 Z-Wave 节点具有哪些功能？...使用 Expo 构建 React Native 应用程序 同样，对于这样一个小项目来说，构建一个应用程序通常工作量太大。

    2.4K40

    React Native最佳实践指北

    对于这个题目，我是很抗拒的，想了怎么写之后，大概有一个思路，准备使用React Natvie做一个与AI 大模型对话的App，为什么是React Native，因为我对Flutter 太过于熟悉了，以至于我觉得使用...技术栈选择当然，我们选择React Native，用于跨平台移动应用开发，这样一套代码可以搞定android和ios，后端one-api直接按照文档，使用docker 进行安装即可，没有什么难度。...本地数据存储，我们使用 async-storage ，网络请求框架，我们这次晚点有意思的，使用 anstack.com/query 。...UI的选择为什么UI的选择单独拿出来呢，因为颜值即正义，对吗，所以，我选择 reactnativeelements他提供的demo可以直接看下，另外，因为他配置了 expo 的模板方式给我们初始化一个项目...总结本文探索了一下 react-native 的开发，使用 expo 直接进行开发，这样，我们不需要太多的环境配置就可以上手，注意最新的 expo ，即 50 版本可以直接文件路由的方式，这意味着熟悉

    1.5K10

    React-Native 入门

    RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。...通过React Native，开发者可以使用React-Native 提供的组件，让应用界面在其他平台上亦能保持始终如一的外观、风格。...App 即原生开发模式,开发出来的是原生程序,不同平台上,Android和iOS的开发方法不同,开发出来的是一个独立的APP,能发布应用商店,有如下优点和缺点。...而Web App一般泛指后面的SPA形式开发出的网站(因为可以模仿一些APP的特性),有如下优点和缺点。...,有如下优点和缺点 优点： 开发成本在 Hybrid 和 Native 开发之间 ，大部分代码还是可复用的， 性能体验高于Hybrid，性能相比原生差别不大 技术日益成熟，发展迅猛 缺点： 门槛相对 Web

    3.8K10

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

    此时，就需要选择一个同时支持多平台的客户端开发框架，能够使用一套代码，编译出多平台的APP。 这样一方面能够缩减开发人数，节省开发成本。...学习成本较高： 在某些地方开发者依然需要为 iOS 和 Android 平台提供两套不同的代码，比如在原有项目的基础上嵌入RN时，需要根据平台进行封装和配置。...虽然您可以使用您选择的任何编辑器来开发您的应用程序，但您需要安装 Android Studio 才能设置必要的工具来构建适用于 Android 的 React Native 应用程序。...如果您已经在系统上安装了 Node，请确保它是 Node 14 或更高版本。如果您的系统上已有 JDK，我们建议使用 JDK11。使用较高的 JDK 版本时可能会遇到问题。...您还可以使用第三方 CLI 来初始化您的 React Native 应用程序，例如 Ignite CLI。

    4.8K22
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券