react native 项目使用 react-native-expo-image-cache 缓存图片,提高图片加载速度-编程思维

一、背景: 项目中数据列表中的图片加载速度比较慢,而且每次都要重新加载,效果很差。经过调研找到一个图片组件库 react-native-fast-image ,它是一个高性能的图片组件,支持自动缓存和预加载。它与内置的 Image 组件的 API 类似,但具有更快的加载速度。 但是,由于项目使用expo框架,无法直接使用需要进行原生链接的第三方库。所以又找到了一个支持expo的图片组件库 rea

使用 expo-location 获取不到位置信息 location.getcurrentpositionasync() 结果无打印-编程思维

问题描述: react native 中使用 expo-location 获取位置信息时,按照官方文档执行案例,获取不到位置结果。Location.requestForegroundPermissionsAsync() 执行后可以获取授权状态,但是执行到 Location.getCurrentPositionAsync() 时不会打印结果。 解决方法: 给 Location.getCurrent

react native 使用 keyboardavoidingview 无效-编程思维

组件介绍: 该组件将根据键盘高度自动调整其高度、位置或底部填充,以在显示虚拟键盘时保持可见。 官方文档: KeyboardAvoidingView 文档地址 遇到的问题: KeyboardAvoidingView 标签要设置 behavior={Platform.OS === "ios" ? "padding" : "height"},iOS系统要使用padding否则样式可能会达不到预期效果

flipper 调试 react native 项目-编程思维

一、安装: 1. 在官网下载桌面应用 Flipper官网地址 Flipper GitHub 首页 2. 打开程序,执行 setup doctor 检测环境是否缺失 参考官方文档 二、使用 全部安装完以后启动react native项目,flipper会检测到运行中的项目模拟器 以expo构建的项目为例: 1. 安装 expo-dev-client 构建开发版本,flipper的使用需要构

react native实现toast轻提示和loading-编程思维

React Native 封装Toast 前言 使用react native的小伙伴都知道,官方并未提供轻提示组件,只提供了ToastAndroid API,顾名思义,只能再安卓环境下使用,对于ios就爱莫能助,故此,只能通过官方的核心组件,自行封装,实现Toast功能 实现 创建文件 首先我们需要创建一个Toast组件,引入对应需要的依赖,icon等等 声明数据类型,通用方法 impo

react native初试:windows下andriod环境搭建-编程思维

最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看;   React Native为Facebook开源的使用Javascript与React开发Android、IOS原生跨平台App,React也是Factbook开源的JS框架使用了虚拟DOM的概念,Factbook自己的应用

react-naive工作原理-编程思维

react-naive工作原理是从react的工作原理衍生出来的 react的工作原理 在react中,virtual dom 就像一个中间层,介于开发者描述的视图与实际在页面上渲染的视图之间。为了在浏览器上渲染出可交互的用户界面,开发者必须操作浏览器的Dom,这个操作代价昂贵,过度操作dom会给性能带来影响。React 维护了一个内存版本的 DOM,通过计算得出必要的最小操作并重新渲染。如下图

react native项目设置路径别名-编程思维

没有设置路径别名之前代码是这样的: import { px2dp } from '../../utils/screenKits'; 路径相当冗长,看着就头疼。增加了路径别名之后,变成这样 import { px2dp } from '~/utils/screenKits'; 心里清爽多了! 具体操作见下文,实操性强! 安装插件 这里我选用 babel-plugin-root-import插件

ios 集成react native到现有ios应用(ficow本人实测,xcode 8.3,ios 10.3)-编程思维

      详细操作步骤,请 参考官方文档  或者 翻译文档 !   我补充一些必要的注意事项:         1.引入React.a文件、配置User Header Search Paths     引入React.a文件(点击+可以看到libReact.a,添加进来就可以了):              配置user header search paths(另外,推荐大家去学习一下Linu