随笔分类 -  React Native

记录工作，学习成长
React Native中 FlatList动态吸顶 stickyHeaderIndices 安卓上白屏处理
摘要：页面结构如下图所示 场景描述：切换左侧tab的时候，右侧固定吸顶的元素可能是第一个，也可能是第X个，所有当点击了左侧tab之后，需要动态设置flatList的 stickyHeaderIndices bug1 - 部分安卓机器上切换完tab之后，动态改变了 stickyHeaderIndices,右 阅读全文
posted @ 2021-10-09 17:00 萝卜爱吃青菜 阅读(1027) 评论(0) 推荐(0)
React Native 在华为手机上的几个诡异bug处理
摘要：bug1：页面上的某模块闪烁，或者部分区域白屏（其他区域良好），手按一下或点击下，又会展示出来。 原因：该模块区域，比如整个是一个View组件包着的内容，是 overflow:'hidden' 和 borderRadius 两个属性冲突导致，当需要圆角视图而内容区域又确实超出了内容，所以一定是需要溢 阅读全文
posted @ 2020-12-18 14:53 萝卜爱吃青菜 阅读(918) 评论(3) 推荐(0)
React Native中ScorllView嵌套的处理。
摘要：众所周知：FlatList 是基于 ScrollView 封装的，底层都是 VirtualizedList 组件。安卓端是有提示的：ScrollView和FlatList是禁止嵌套的。 先上布局，最终做出来的显示页面如下： 简单分析下布局：整个页面是可以下拉刷新的，日历是吸顶的一个横向可滚动的Fla 阅读全文
posted @ 2020-12-18 14:33 萝卜爱吃青菜 阅读(1902) 评论(0) 推荐(0)
rematch的状态对象应该挂在页面上而不是APP根组件上
摘要：1. 在项目中应该每个页面维持一个store，而不是所有页面的store全都放在APP层，如下： <Provider store={store}> <App {...this.props} /> </Provider> 原因：在app中可能会采取模块预加载功能，或者缓存整个模块的历史数据。 如果单页 阅读全文
posted @ 2020-06-01 15:44 萝卜爱吃青菜 阅读(272) 评论(0) 推荐(0)
react native 项目安卓bug小结
摘要：1. 这个人民币符号￥在华为手机上容易显示的少一横，用这个¥就没问题，最好写成固定变量封装在某文件中，作为变量来引用。 2. 在Android上指定Roboto字库，在OPPO、一加机型上字符被截断。对应issue跳转， 所以需要对Text标签进行处理一下。内置includeFontPadding属 阅读全文
posted @ 2020-06-01 15:03 萝卜爱吃青菜 阅读(418) 评论(0) 推荐(0)
react native项目中时间计算异常问题
摘要：Hermes存在部分机型，设置了时区，new Date()返回值和JSC表现不一样，有问题 描述：真机连接本地服务跑起来一切正常，断开连接本地，就会有bug，由于new Date导致算时间有问题，有相关时间计算的最后都显示NAN 机型： iphone11 oppo 等 原因 Hermes有问题的时间 阅读全文
posted @ 2020-06-01 14:42 萝卜爱吃青菜 阅读(415) 评论(0) 推荐(0)
函数式组件中防抖函数的使用注意
摘要：tip: 在搜索的场景中，一般都会使用防抖来限制触发请求的频率。 //示例 changeCallback(){ console.log('99999') } changeDebounce = debounce(this.changeCallback,1000) render() { return ( 阅读全文
posted @ 2020-06-01 14:28 萝卜爱吃青菜 阅读(620) 评论(0) 推荐(0)
防抖截流装饰器的封装
摘要：注释 / @example @limitFrequency('debounce') @limitFrequency('throttle') @params type:String enum('debounce'，'throttle') @params wait:Number 延迟时间默认500毫秒， 阅读全文
posted @ 2020-04-22 15:12 萝卜爱吃青菜 阅读(591) 评论(0) 推荐(0)
React native 禁止手势触摸 pointerEvents
摘要：碰到一个需求是做个轮播图带自动播放的，UED那边给轮播的底部加了阴影渐变，如下红色区域。 这样会导致一个问题，手触摸在红色区域会被这层View挡住，导致不能手动滑动切换。 原先采取过的方法是在对应的触摸事件 执行return false ，但是这个局限于轮播图得是红色区域的父组件。不然触摸无法冒泡上 阅读全文
posted @ 2019-10-29 16:54 萝卜爱吃青菜 阅读(1579) 评论(0) 推荐(0)
React native 放大点击区域 hitSlop属性的使用
摘要：在日常的需求中，如上图的加减按钮，可能写ui布局的时候没考虑实际的这个点击范围太小，不利于真机上用户点击到，如果加包裹层加padding的话又会影响原先定好的布局，或者不利于对齐。 那么可以用 hitSlop 这个属性，TouchableWithoutFeedback 或者 TouchableOpa 阅读全文
posted @ 2019-10-29 16:14 萝卜爱吃青菜 阅读(3118) 评论(0) 推荐(0)
APP 和小程序中通过日期格式获取时间戳的一个bug
摘要：介绍一下背景：业务逻辑就不多说了，就说关键出问题的一步，需要将 2019-10-10 这个格式转换为时间戳。在不同平台不同场景下问题还很怪异 app上：ios 安卓线上的都有问题 ios模拟器没问题 ios真机连本地有问题，安卓真机连本地没问题 微信小程序上：小程序真机调试没问题，预览和线上有问题 阅读全文
posted @ 2019-10-10 17:57 萝卜爱吃青菜 阅读(536) 评论(0) 推荐(0)
react native 中 Demensions的坑
摘要：简单描述下碰到的问题：Demensions.get('window').height，一般拿来获取屏幕高度的。但是在小米mix3上面（其他安卓机型可能也会有）无论底部的虚拟物理键盘显示与否（底部的返回键,home键），高度都是全屏高度减去虚拟物理键盘高度的值。 这样会出现一个问题，当在手机设置中关闭 阅读全文
posted @ 2019-10-10 17:40 萝卜爱吃青菜 阅读(1204) 评论(1) 推荐(0)
RN如何固定底部的按钮
摘要：如上图的底部新增按钮，要是放在web里那是相当简单，直接是用固定定位就行，但是在RN里是没有固定定位可言的。 方案一： 采用绝对定位，相对于最外层的定位在底部位置。（在部分安卓机上有问题，动态计算的高度，定位底部的高度有问题，导致底部按钮定位脱离了视野） 正确方案：还是flex布局好用。 大致如上图 阅读全文
posted @ 2019-03-19 11:18 萝卜爱吃青菜 阅读(3352) 评论(0) 推荐(0)