由于最近又要开始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跨平台移动端开发!
AsyncStorage JavaScript代码是一个门面,它提供了一个清晰的JavaScript API、真实的Error对象和非多函数。API中的每个方法都会返回一个Promise对象。...import { AsyncStorage } from 'react-native'; 持久化数据: _storeData = async () => { try { await AsyncStorage.setItem...MySuperStore:key', 'I like to save it.' ); } catch (error) { // Error saving data } }; 提取数据
开发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下使用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 经过漫长的等待,应该就能正常运行了。
不过今天我们不谈 Web 的性能优化,只是借助刚刚的那个那个经典问题的分析思路,从 React Native 的启动到页面的第一次渲染完成,结合 React Native 的源码和 1.0 的新架构,一一分析...我们的应用从 0.59 升级到 0.62 之后,我们的 APP 没有做任何的性能优化工作,启动时间直接缩短了 1/2。当 React Native 的新架构发布后,启动速度和渲染速度都会大大加强。...React Native 新架构中的 JSI,主要就是起这个作用的,借助 JSI,我们可以用 JS 直接获得 C++ 对象的引用(Host Objects),进而直接控制 UI,直接调用 Native...总结 本文主要从 Native 的角度出发,从源码分析 React Native 现有架构的启动流程,总结了几个 Native 层的性能优化点;最后又简单介绍了一下React Native 的新架构。...下一篇文章我会讲解如何从 JavaScript 入手,优化 React Native 的启动速度。
从 React 说起 随着 React 的大规模应用,Facebook 越发感受到 React 以及 Web 技术的优势,希望 Native 开发也能像 Web 一样Move fast: 快速迭代(Rapid...Conf Round-up 2015:首次介绍 React Native,演讲视频见React.js Conf 2015 Keynote – Introducing React Native、React.js...Native 从移动端走向了 PC(Win 10)、游戏机(Xbox One)、手环(Gear Fit 2)、智能电视机(SUHD)甚至全息眼镜(HoloLens) 此外,开发体验、性能、API 能力等都在快速迭代中不断提升...TypeScript with React Native:社区提供 TypeScript 支持 State of React Native 2018:React Native 在 Facebook 内外广泛使用...for mobile apps, starting with React Native 在开源社区的参与下,架构升级计划进展迅速,部分非核心模块从 React Native Core 拆出去独立维护,并且效果不错
在这篇文章中,我们将看到如何在React Native应用中创建和发送推送通知。 什么是推送通知? 推送通知是从应用程序发送到已安装该应用的用户的消息或警报。...React Native 中的推送通知架构 在我们深入了解如何在 React Native 应用中实现推送通知的技术细节之前,理解React Native推送通知的工作原理可能会有所帮助。...让我们看看这些问题的原因以及如何解决它们: 我无法在裸 React Native 应用中运行 Expo 通知:这是因为 Expo 通知库依赖于其他 Expo 库。...最好是从 Expo 中弹出或者启动一个裸 React Native 项目。 总结 在这篇文章中,我们了解了为什么推送通知如此受欢迎。...我们还学习了如何在 React Native 应用程序中发送推送通知,方法是添加通知令牌,从服务器发送它们,并使用 Expo 通知 API 在用户设备上显示它们。
注:在本文中,我们将在 React Native 应用程序中使用 Expo。.../native-stack"; 在根 App.js 文件中实现导航非常有用,因为从 App.js 导出的组件是 React Native 应用程序的入口点(或根组件),而其他每个组件都是其后代。.../drawer 包: 接下来,我们将使用 npx expo install 安装依赖项: npx expo install react-native-gesture-handler react-native-reanimated...@react-navigation/native 模块导入的,它会返回一个带有编程操作的导航对象。...首先,将参数作为 navigation.navigate 函数的第二个参数放入一个对象中,从而将参数传递给路由: 然后,读取屏幕组件中的参数。
思维导图版本 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-router-flux svg react-native-svg 读取xml xmldom 矢量图形...@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
最近公司有个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO Expo是通用React应用程序的框架和平台。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...创建项目 expo init my-project EXPO 提供了 很方便开发便捷 从项目的开发 到 最终的上线, 都很轻松。...React Native 支持热更新 这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。
关于React Native是什么,各位可谷歌之,这里主要给大家安利下React Native,总结下一些从Android到React Native相关的概念和基础。...是的,Navigator是用来做跳转的,通过场景(Scene)来指定跳转对象。这里Scene类似Intent的作用,告诉Navigator我要去哪里,Navigator负责场景推入和退出。...4)state,状态 更新界面,修改显示,加载数据,用户交互,都是靠它,它是整个React Native的核心之一,React Native组件的state变化了,那么它就会重新渲染,所以维护state...,通过数据或者动作更新state等,是React Native的重点,也是和原生很大差异的地方。 ...2、从Android到React Native开发(二、通信与模块实现) 3、从Android到React Native开发(三、自定义原生控件支持) 4、从Android到React Native开发
关于React Native是什么,各位可谷歌之,这里主要给大家安利下React Native,总结下一些从Android到React Native相关的概念和基础。...是的,Navigator是用来做跳转的,通过场景(Scene)来指定跳转对象。这里Scene类似Intent的作用,告诉Navigator我要去哪里,Navigator负责场景推入和退出。...4)state,状态 更新界面,修改显示,加载数据,用户交互,都是靠它,它是整个React Native的核心之一,React Native组件的state变化了,那么它就会重新渲染,所以维护state...,通过数据或者动作更新state等,是React Native的重点,也是和原生很大差异的地方。...2、从Android到React Native开发(二、通信与模块实现) 3、从Android到React Native开发(三、自定义原生控件支持) 4、从Android到React Native开发
前言 在数据驱动的开发中,数据的缓存是非常重要的一环。我们从网络或其他地方获取了数据,如果每次用完就抛弃势必会浪费CPU的性能和用户的流量。因此,我们需要对数据进行持久化处理。...介绍 React Native中提供了AsyncStorage类用于持久化的处理数据。...相关资料reactnative.cn 由于AsyncStorage接口比较复杂,社区中出现了不少基于AsyncStorage的封装库,我们今天就使用了其中一款——react-native-storage...code import Storage from 'react-native-storage'; import { AsyncStorage } from 'react-native'; var Cstorage.../sync') // 这个sync文件是要你自己写的 }) // 对于react native global.storage = storage; }, save:
Realm:今天才发现 Realm 也已经支持 React-Native ,这是新兴的移动端数据存储方式,在没有它之前,一直都是使用 sqlist 进行数据存储,在性能上,各有优势,但是操作上,Realm...}) } AsyncStorage效果演示.gif 按照官方推荐,我们使用 AsyncStorage 前,最好进行一层封装,React-Native中文网 给我们提供了一个比较好的框架 —— react-native-storage...react-native-storage 的使用就先讲到这里。...react-native link realm React-Native < 0.31.0 rnpm link realm 配置成功.png 出现上面的提示表示成功,然后我们需要卸载模拟器中已经安装的...:react-native:+" // From node_modules } 接着,重新运行安卓: react-native run-android 如果还是不行,
最近公司有个React Native 项目,不得不学习下RN了。由于之前学过React,学React Native 过程还算可以,不太艰难。...创建新项目 react-native init ProjectName 3. yarn start 安装 EXPO 脚手架 什么是EXPO ★Expo是通用React应用程序的框架和平台。...它是围绕React Native和本机平台构建的一组工具和服务,可帮助您从同一JavaScript / TypeScript代码库在iOS,Android和Web应用程序上开发,构建,部署和快速迭代。...创建项目 expo init my-project EXPO 提供了 很方便开发便捷 ★从项目的开发 到 最终的上线, 都很轻松。...” React Native 支持热更新 ★这样很方便我们开发APP 中调试, 数据改变, 视图同时改变。
目前推特、expo、大联盟足球、Flipkart、优步、《泰晤士报》、DataCamp 以及我们小作坊都在生产中使用了 react-native-web。...浅显地认为react-native-web就是把React Native的组件和API都用适用于Web的标签和API再适配实现一遍,使其在Web上的行为和在原生应用上尽量保持一致,从文档中提到的 Alert...添加到React Native项目 一般来说新建 React Native 项目时可以选用 expo-cli 或者 react-native-cli 来创建。...expo-cli web 而我们实际开发中可能用 react-native-cli脚手架来构建项目比较多些,那么如何引入 react-native-web呢?...Native 入口文件需修改为 App.web,不然只有Web端才能读取App.web.js; 适当执行.
在这个教程中,我们将演示如何在React Native中构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOS和Android应用构建出色的欢迎界面。...在React Native中创建启动屏有很多好处。例如,考虑一个从API加载数据的场景。在用户等待时显示加载器是一种良好的用户体验。...首先,使用下面的任一命令安装 react-native-splash-screen 包: /* npm */ npm i react-native-splash-screen --save /* yarn...StyleSheet, SafeAreaView, useColorScheme, } from 'react-native'; import {Colors} from 'react-native...请参考下面的截图: 构建一个Expo启动屏幕 到目前为止,我们已经探讨了如何在一个裸 React Native 应用中构建启动屏幕。
我们在选择 flutter 和 React Native 的时候,需要考虑以下几个关键因素:团队成员的经验:如果你的团队已经熟悉 JavaScript 和 React,那么使用 React Native...Expo 快速研发 React Native App随着react native 诞生,以经历过一段不短时间的发展,有些 react native 配套的快速开发框架也随之出现,其中 expo 就是里面的翘楚...,我这两天也正是体验了一下 expo 研发一个 chatbox 的 App,有了一些体验,所以才整理输出一篇关于 expo 开发 react native 的小作文。...ui 组件库 react-native-elements ,该库提供了一个expo 框架的模板,我就是基于这个开始的,而且还是一个 typescript 的。相当省事。...网络请求 tanstack / react-query,这个库是用来做数据请求的,mutate用来做触发,query 用来做查询,状态管理根本就无需你关心,缓存失效自动触发更新等机制真的是太爱了,你要做的真的就是面相逻辑编程
要跟上进度,你应该熟悉 React Native 或 Expo SDK 的基础知识,包括 JSX、组件(类和函数式)和样式。...然后,将你之前从静态文件夹中复制的所有TTF文件粘贴到你的项目的 fonts 文件夹中: 接下来,在根目录中创建一个 react-native.config.js 文件,并将下面的代码粘贴到其中: 将字体链接到要在项目文件中使用...让我们看看输出: 在Expo中使用自定义字体的React Native 在这一部分,我们将学习如何在Expo中使用自定义字体。..."expo-font"; import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native...无论是使用Expo还是React Native CLI,这个过程都将大大提升你的应用的美观度和可用性。
通过 Redux,开发者可以更方便地进行数据共享和数据持久化,并且可以更好地控制应用的状态变化。...8、React Native CLI React Native CLI 是一个命令行工具集,可以方便地创建、打包和发布 React Native 应用。...9、Expo Expo 是一个开发平台,提供了许多开箱即用的组件和 API,可以帮助开发者更快速地开发 React Native 应用。...Expo 的使用非常简单,只需要安装 Expo CLI,就可以快速地创建和打包一个基于 Expo 的应用。...Expo 适合那些不需要进行底层原生开发的 React Native 应用,可以大大提高开发效率和代码质量。
领取专属 10元无门槛券
手把手带您无忧上云