React-native踩坑小记

React-native踩坑小记

最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都出在android上。。。最近看GitHub issues最多的一句就是。 everything is ok on iOS…

目前我们所做的一个页面,组件嵌套大致如下图:

tab切换的在最外层,每一个tab页签对应一个listview,同时在listview中还嵌套了一个轮播图swiper

开发过程中遇到了如下几个问题(android环境下):

  1. swiper插件无法显示;
  2. listview没有弹性边界,无法实现线上的下拉刷新效果;
  3. swiper插件和tab-view插件手势冲突;

如何填平这几个坑:

1. swiper插件无法显示:

因为android下,scrollviewlistview组件嵌套后会导致scrollview内容无法被渲染,所以无法显示。 所以我们将swiper挪到了listview的header中。(因为header被下拉刷新的组件所使用,所以我们重写了插件部分代码,将swiper塞了进去)

2. listview没有弹性边界,无法实现线上的下拉刷新效果:

因为android本身就没有滚动到边界还能继续滚动的策略。。这里使用一些java补丁代码(列表插件所提供),来实现弹性边界-。-

3. swiper插件和tab-view插件手势冲突

因为最外层tab和swiper,都用到了滑动切换的特性,然而这个需求在android上边实现。。会导致直接滑动外层tab,而不是swiper。。。

于是我们开始研究android的触摸事件到底是怎么个执行法。 大致是一个先捕获,再冒泡的过程:

  1. 最外层组件触发回调,询问是否捕获事件,并阻止事件继续传递。 返回ture则是表明捕获事件,事件结束, 返回false则事件继续向下询问。
  2. 等到捕获阶段全部走完以后,最内层的组件会触发回调,询问是否作为此次触摸操作的事件执行者(消费者),返回true则表明对此次事件负责,返回false事件则继续向外层冒泡。
在React-native中,View组件有如下几个常用事件:

争权的几个事件(通过返回值来确定这次操作应该由谁来响应) onStartShouldSetResponder onMoveShouldSetResponder onStartShouldSetResponderCapture onMoveShouldSetResponderCapture

触发顺序为(以Start为例):
  1. 外层 onStartShouldSetResponderCapture (如果返回true 跳到第4步)
  2. 内层 onStartShouldSetResponderCapture
  3. 内层 onStartShouldSetResponder (如果返回true 终止)
  4. 外层 onStartShouldSetResponder

由于Swiper组件中的广告图涉及到跳转打开网页之类的操作,所以我们引入了Touch*组件。 Touch* 组件有两个事件是这里我们需要用到的:onPressInonPressOut 这两个事件会在手指按下和抬起时触发; 所以我们需要做的就是在这两个事件中触发锁定和解锁外层scrollview的可滚动性。 我们这里使用了setNativeProps方法进行锁定scrollviewsetNativeProps不会触发重绘,直接改变React对象的props值。(为了时效性,等待render的重绘就太慢了。。虽说有的时候手快了,还是会拦截不到事件-.- 然而当我下载了我司客户端后发现有时也会存在这个问题我就坦然了,233333333) 一个简单的阻止外层scrollview滑动的栗子

所使用插件的链接:

  1. 当下最好用的列表插件,可高度自定义的上拉刷新和下拉加载样式
  2. 支持触摸滑动切换的tab页签,头部可自定义
  3. 目前支持度最高的一个Swiper插件

结束语:

目前研究ReactNative所遇到的坑就这么几个咯,所幸能够解决这种问题(其实已经耽误了很久了)。 这个页面用到了三个插件。。有两个源码都被针对android进行修改(淡淡的忧伤)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏安富莱嵌入式技术分享

emWin实现ATM机界面设计,含uCOS-III和FreeRTOS两个版本

第1期:ATM机 配套例子: V6-900_STemWin提高篇实验_ATM机(uCOS-III) V6-901_STemWin提高篇实验_ATM机(FreeR...

1041
来自专栏Nian糕的私人厨房

Vue2.0 scroll 组件的抽象和应用

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

714
来自专栏前端新视界

如何在现有的 Web 应用中使用 ReactJS

原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin ? 当我们学习...

2564
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

3147
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

4945
来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

1125
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

2698
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

4275
来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

820
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

1533

扫码关注云+社区

领取腾讯云代金券