react-native
文章平均质量分 72
rock.dai
我是一名前端客户端开发工程师,主要领域:android、react-native、vue、react、小程序
展开
-
mobx升级到6后组件不刷新
问题描述项目进行package.json中的依赖包全量更新(可以参照npm更新项目中全部依赖),将mox:5.15.7,mobx-react:6.3.1更新到 mox:6.0.4,mobx-react:7.0.5 应用通过@observable修饰的属性变更后,视图并不刷新问题寻求解决思路github中issue找到了关于autorun无法自动触发的问题,推理视图无法刷新的原因也是一致的(mobx中文网还没有更新mobx6版本的文档,部分调整暂时我们只能通过某些方式去看官网了,你懂的)issue中的原创 2020-12-14 17:08:33 · 2269 阅读 · 7 评论 -
基于Hoc封装业务FlatList
Hoc是什么?HOC(High Order Component) 是react提出的一种设计模式,接收一个组件作为参数,并返回一个新的组件。业务FlatList封装起因FlatList作为ReactNative开发中最长使用到的组件之一,其官方已经封装很完善了,我们的列表页面只需要简单引入即可,但是,一般app中会有多个页面都是列表展示,并且没有太复杂的操作,而我们则需要复制多个FlatList,包括头部、底部、间隙等组件的配置,更重要的是在处理FlatList的data列表数据时,我们需要下拉刷新原创 2020-12-09 18:26:50 · 481 阅读 · 0 评论 -
ReactNative设置路径别名
ReactNative设置路径别名原创 2022-12-13 13:42:53 · 425 阅读 · 0 评论 -
RN使用mobx状态管理库
RN引入mobx状态管理库mobx介绍Mobx和Redux都是应用于React工程优秀的状态管理库,可以解决我们跨页面跨组件间通信问题。不过理念有所不同,Redux推崇状态树的概念,认为一个应用中只应该存在一个状态库,通过Provider将store挂载到视图顶层,使用的组件通过connect方式用props来访问需要的状态属性。而Mobx则并不强调状态树的概念,而是可以各自模块使用各自的状态库,不过也同样可以通过Provider将状态挂载到顶层视图,在消费组件中通过inject获取到props状态。原创 2021-12-10 17:25:55 · 1713 阅读 · 2 评论 -
RN配置eslint规则
在ReactNative配置git hooks进行eslint检查一文中有详细介绍ReactNative项目怎么添加git hooks,使得在git commit之前对代码进行eslint检查,本文记录一下对应的eslint规则。eslint实用规则规则继承自@react-native-community,在此基础上进行一些自定义的rules配置,具体含义可以在eslint官网查看具体说明是示例module.exports = { root: true, extends: ['@react-n原创 2021-11-09 15:15:59 · 1042 阅读 · 0 评论 -
ReactNative配置git hooks进行eslint检查
为了让我们commit代码时,可以避免提交一些测试性的例如alert、if判断写死等调试性代码,同时增强项目代码的健壮性和可维护性,特引入git hooks配置使得没有通过eslint的规则校验的暂存区文件无法commit的到本地仓库引入过程引入依赖包 yarn add -D eslint@7.32.0 @react-native-community/eslint-config lint-staged typescript为什么eslint使用7.32.0,而不使用最新的8.x版本因为e原创 2021-11-05 14:35:58 · 780 阅读 · 0 评论 -
react-native-webview和h5通信
直奔主题,不贴官方文档。在支持RN客户端和基于vue开发的前端页面信息交互的期间,记录一下关于WebView和html的交互过程,主要通过一下三点来记录:html向RN通信RN向Html通信在项目中使用官方文档有介绍如何进行交互,官网传送门React Native -> Web: The injectedJavaScript propReact Native -> Web: The injectJavaScript methodWeb -> React Native:原创 2021-02-07 15:58:54 · 5726 阅读 · 4 评论 -
React-Native PanResponder详解
最近想封装一个滑动组件给项目其他组件使用,React Native官方文档中就PanResponder的使用有做大致的讲解,同时网上也有各种关于PanResponder的详解教程,但在真实集成的时候发现了以下问题,谨以此文记录。先说结论不能在TouchableOpacity中使用触摸被设置了PanResponder的View,如果内部有TouchableOpacity,只有当onStartShouldSetPanResponderCapture为false时,内部的事件响应才能被执行...原创 2020-12-18 15:00:29 · 2193 阅读 · 0 评论 -
react-native-webview网页拨打电话
问题描述在使用ReactNative开发过程中,使用了WebView来加载公司的市场宣传网页,并且在页面上设置了手机号<a>标签,但是在应用中点击网页上的这个链接后,报错“net::ERR_UNKNOWN_URL_SCHEME”tel://11011112222环境说明react-native-webview版本号:9.3.0解决方法设置Webview的onNavigationStateChange函数,当其为“tel://”协议时,使用Linking跳转,并.原创 2020-08-05 10:10:41 · 490 阅读 · 0 评论 -
AppCenter Code Push热更新
codePush已经被微软将其移动到了appcenter中心,后续关于codePush的相关问题都移步到appcenter官网中进行查看https://appcenter.ms本文只记录通过codePush对React Native项目进行热更新的操作,关于集成方面直接查看官方文档即可(官方集成文档:https://docs.microsoft.com/en-us/appcenter/dist...原创 2020-01-28 11:40:34 · 3696 阅读 · 0 评论 -
npm升级组件库-发布的npm仓库包
今天记录一下升级在npm仓库中的组件操作方式。查看组件的所有版本命令npm view 组件名versions 例如:npm view react-native-ywx-sign versions向npm仓库更新自己的组件npm组件的版本分为3位,major对应的第一位,minor对应第二位,patch对应第三位本地更新进入package.json文件所...原创 2019-01-21 19:53:24 · 5244 阅读 · 1 评论 -
React Native真机测试404错误
由于项目的原因,我们小组正式进行React Native技术调研,用以开发Android和Ios产品,在React Native的初步接触中,经过开发环境的搭建,成功在WebStrom平台下创建了第一个React Native的project。 使用真机运行时,页面白屏,摇晃手机后Reload后的页面如下: 在浏览器输入“http://localhost:8081/”,结果如下: 说明原创 2017-06-15 14:14:29 · 2102 阅读 · 0 评论