import { AsyncStorage } from 'react-native'; 持久化数据: _storeData = async () => { try { await AsyncStorage.setItem
开发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
由于最近又要开始react native的开发,所以重新翻了下官方文档,发现rn已经迭代到46版本了,安装最新的版本,还需要额外的第三方编译库,还用上了yarn。...需要借助两个工具: 1. create-react-native-app 2....一、手机安装Expo 二、电脑安装 create-nreact-native-app 终端控制台: $ npm install -g create-react-native-app 三、初始化一个rn项目...$ create-react-native-app ACERun $ cd ACERun/ $ npm start 通过 npm start 启动动该应用后,会生成一个二维码。...我体验了下, 很简单,就3步, 即可开始react native跨平台移动端开发!
在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 经过漫长的等待,应该就能正常运行了。
commond + r 不起作用 请检查模拟器是否连接到了电脑键盘
React Native 中的推送通知架构 在我们深入了解如何在 React Native 应用中实现推送通知的技术细节之前,理解React Native推送通知的工作原理可能会有所帮助。...否则,目前,我们将Expo的 token 记录到控制台,以便于开发。...现在,通过Expo应用程序打开应用。一旦你打开应用,你可以在控制台上看到Expo推送通知令牌。...我们将不再在控制台上记录我们的令牌,而是将其发送到服务器: const AppNavigator = () => { useEffect(() => { registerForPushNotificationsAsync...让我们看看这些问题的原因以及如何解决它们: 我无法在裸 React Native 应用中运行 Expo 通知:这是因为 Expo 通知库依赖于其他 Expo 库。
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 神器如何使用,
是否有必要学 react-native? 先说一个结论:RN ≠ 原生,别指望会个 react 就能写出靠谱的原生应用。...Expo Expo 是基于 React Native 并整合大量常用的 native module(Expo SDK),像原生的功能如相册,相机,蓝牙等功能,在 expo 都是直接集成的,相当于封装原生的...React Native 和 Next.js 应用程序共享代码 如果你想要在 React Native 和 Next.js 应用程序共享代码(UI,逻辑),你可以考虑使用 solito。...但在 expo 中有 react-native-pager-view作为平替,并且更兼容原生,但是 react-native-pager-view 是不支持 Web 端的,因此如何选择就看具体需求了。...这种效果可以使用监听 ScrollY 配合 react-native-reanimated 动画来实现,如果你不想自己实现也可以看看 @codeherence/react-native-header,上图便来自此库
我们在选择 flutter 和 React Native 的时候,需要考虑以下几个关键因素:团队成员的经验:如果你的团队已经熟悉 JavaScript 和 React,那么使用 React Native...,那么 react native 的研发效率会快很多。...Expo 快速研发 React Native App随着react native 诞生,以经历过一段不短时间的发展,有些 react native 配套的快速开发框架也随之出现,其中 expo 就是里面的翘楚...,我这两天也正是体验了一下 expo 研发一个 chatbox 的 App,有了一些体验,所以才整理输出一篇关于 expo 开发 react native 的小作文。...ui 组件库 react-native-elements ,该库提供了一个expo 框架的模板,我就是基于这个开始的,而且还是一个 typescript 的。相当省事。
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 神器如何使用
确保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
Using the Expo CLI You can think of expo as an environment that builds a ready to run React Native application...You can read more about it on expo.io....You can also run the React Native application on your phone by installing the expo app on your phone....In the previous versions of React and React Native, the React and React Native community were using classes...There are a lot of topics such as React Navigation, expo components, different sorts of views which you
8、React Native CLI React Native CLI 是一个命令行工具集,可以方便地创建、打包和发布 React Native 应用。...9、Expo Expo 是一个开发平台,提供了许多开箱即用的组件和 API,可以帮助开发者更快速地开发 React Native 应用。...同时,Expo 还提供了一个在线开发工具 Expo Snack,可以方便地在浏览器中进行开发和调试。...Expo 的使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。
要跟上进度,你应该熟悉 React Native 或 Expo SDK 的基础知识,包括 JSX、组件(类和函数式)和样式。...让我们看看输出: 在Expo中使用自定义字体的React Native 在这一部分,我们将学习如何在Expo中使用自定义字体。..."expo-font"; import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native...在我们的模拟器中看看这是什么样子: 使用自定义字体 假设你正在构建一个个人的 React Native 项目,并且你得到了一些自定义字体,这些字体并不在 Expo 支持的 Google 字体库中。...无论是使用Expo还是React Native CLI,这个过程都将大大提升你的应用的美观度和可用性。
图片8、React Native CLIReact Native CLI 是一个命令行工具集,可以方便地创建、打包和发布 React Native 应用。...通过 React Native CLI,开发者可以快速地创建一个基于 React Native 的应用,并且可以方便地进行调试和打包。...同时,Expo 还提供了一个在线开发工具 Expo Snack,可以方便地在浏览器中进行开发和调试。...Expo 的使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。
8、React Native CLIReact Native CLI 是一个命令行工具集,可以方便地创建、打包和发布 React Native 应用。...通过 React Native CLI,开发者可以快速地创建一个基于 React Native 的应用,并且可以方便地进行调试和打包。...同时,Expo 还提供了一个在线开发工具 Expo Snack,可以方便地在浏览器中进行开发和调试。...Expo 的使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。
思维导图版本 React-native组件库列表 react-native 对 react 对 数据管理 mobx-react 对 mobx UI @ant-design/react-native 对...react-native-gesture-handler/ 权限获取 react-native-permissions 动画 react-native-reanimated 路由 react-native-router-flux...对 全屏 react-native-screens 闪屏页 react-native-splash-screen 存储 @react-native-community/async-storage react-native-storage...@react-native-community/art tab react-native-tab-view expo系列 基础 once and then you will be able to use...most of the packages from the Expo SDK react-native-unimodules 停止休眠 expo-keep-awake 截图 react-native-view-shot
本项目是由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 这是我项目的依赖版本
React Native了。...作为一个创建react native应用的脚手架工具,你可以通过如下命令完成安装: npm install -g create-react-native-app 接下来就可以通过create-react-native-app...create-react-native-app常用命令 npm start 启动本地开发服务器,这样一来你就可以通过Expo扫码将APP运行起来了。...然后用Expo扫码屏幕上的二维码,aa就可以运行在Expo上了。 ? 提示:为了确保Expo App能够正常访问到你的PC,你需要确保你的手机和PC处于同一网段内或者他们能够联通。...编辑App 经过上述的步骤,快速开发React Native App的环境就已经搭建好了,小伙伴门是不是迫不及待的想修改一下APP来查看运行效果了呢,接下来就可以编辑App.js来在Expo上查看运行效果哦
领取专属 10元无门槛券
手把手带您无忧上云