前言
由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN 提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西.
项目地址 在这里,如果有好的意见欢迎提 issue 或 pr.
开始
我们先来看下,腾讯课堂视频播放详情页面是怎么样的?
咋一看界面感觉有点复杂,其实简化来说,这个界面可以看成 tab 组件 + scroll 组件.哲学上说,要抓好主要矛盾与次要矛盾,这个问题的主要矛盾是 scroll 组件实现,也就是最外层的 RNFixScrollView.
说道这里,我尝试着写了个测试 js 例子,最外面套一个 ReactNative 自带的 ScrollView 并设置视频播放控件的高度为
200
和 Tab 导航控件的
style={{height: windowHeight- 80}}
,那这样滚动距离到 120 时,滚动条到底部了,视频播发控件的区域距离屏幕顶部还有 80.
跑起来运行后发现的一个严重的问题是,如果 Tab 导航控件的内容区域存在 ScrollView 或者 ListView 时,无法滚动,只有最外层可以滚动,也就是手势滚动被拦截了?
一开始想两种大的思路:一种是完全靠 JS 层面,通过 ScrollView 暴露的 API 去实现,第二种是原生 + JS,这里涉及到几个关键的东西,如何寻找 Tab 导航控件中的 ScrollView 或者 ListView 和控制手势实现的效果 -- 外层滚动容器到顶部 + 手势往上则通知内层滚动容器开始滚动;内层到顶部 + 手势往下则通知外层开始滚动.
发现第一种方法在解决如何寻找子控件并判断滚动状态上没有方法(可能是我没发现)以及性能上的考量,那就采用第二种方法.
分析
为了解决上面的问题,我们需要了解几个关键点.
一个是怎么判断手势滑动以及外层滚动容器到底部和内层滚动到顶部?
第二个是寻找滚动组件并通知内层滚动组件开始滚动?
因此,网上搜寻这两个问题的相关资料和解决办法,判断是否到底部很容易搜到了,当然了解了其原理.另外,判断手势是往上滑还是往下滑的问题放到后面说明.
寻找内层滚动容器,一开始是认为递归寻找可见的 ScrollView 实例 (Android 中界面控件是一种树形结构),通过 Hierarchy Viewer 工具发现这三个都是可见的,随后对比三个 ScrollView 属性发现其在屏幕上的 LocationOnScreenX 坐标不同,如果当前滚动容器显示则等于 0.
剩下最后一个如何通知内层容器滚动呢?先卖个关子,在解决这个问题之前,我们先来了解下 Android 中的 View 事件是如何传递的.
正所谓知己知彼,百战不殆,看看 Android 触摸事件类型有哪些?我们想下玩手机的时候手指的情况:落下手指,抬起手指,移动手指是三种基本的操作,其实也是 3 种触摸事件,分别代表着
MotionEvent.ACTION_DOWN,MotionEvent.ACTION_UP,MotionEvent.ACTION_MOVE
简单来说,如下图所示:触摸事件发生后,如果事件的坐标处于 ViewGroup 的管辖范围,那么首先调用 ViewGroup 的 dispatchTouchEvent 方法,然后其内部调用 onInterceptTouchEvent() 方法来判断是否拦截该触摸事件,若拦截该事件则调用 ViewGroup 的 onTouchEvent() 方法,否则的话,交给其子 View 的 dispatchTouchEvent 处理.
具体可以参考我以前写的 事件分发机制学习 .
回过头来讲外层滚动容器通知内层滚动,其实通知滚动相当于不拦截事件,那么就是重写
onInterceptTouchEvent
方法并返回 false.而这个方法会随着手势不断调用,这时候聪明的你想到了啥?根据手触摸屏幕的 y 坐标差来判断手势往上还是往下.手指滑动时会产生一系列触摸事件,这里有两种情况:说明下屏幕的左上角是坐标原点,沿着右边是 x 轴,左边则是 y 轴.
① Down -> Move ... -> Move -> UP
② Down -> Move ->... -> Move
记录 Down 触摸事件的 Y 坐标值作为起始值,Move 或者 UP 的 Y 坐标值作为末尾值,两者之差大于最小滑动值则说明向上滑,小于最小滑动值则说明向上滑 (这里简化了条件,如果是实现 OnGestureListener 的话判断滑动的话还有 X 轴滑动速度值和 Y 轴滑动速度值).到这里前面提的两个问题都得到解决了,下面开始真正上手了.
如何封装 RN 组件
参考 RN 0.51 中文文档 ,我们需要做这些东西:
原生上要做的事
1. 创建原生固定滚动控件
2. 创建管理滚动控件 ViewManager 的子类
3. 创建实现了 ReactPackage 接口的类
JavaScript 上要做的事
4. 实现对应的 JavaScript 模块
开始动手
1. 创建原生固定滚动控件
根据前面的分析,我们知道写原生滚动控件主要是重写控制拦截事件方法
onInterceptTouchEvent
,这里先说明下我们只需要判断当前 Tab 导航控件 存在 ScrollView 的话才进入我们的逻辑进行拦截控制,否则按默认的逻辑.
需要在
MotionEvent.ACTION_DOWN
事件中,通过前面分析的条件寻找第一个子 ScrollView , 代码如下:
private ScrollView findScrollView(ViewGroup group) {
if (group != null) {
for (int i = 0, j = group.getChildCount(); i < j; i++) {
View child = group.getChildAt(i);
if (child instanceof ScrollView) {
//获取view在整个屏幕中的坐标如果x==0的话代表这个scrollview是正在显示
int[] location = new int[2];
child.getLocationOnScreen(location);
System.out.print("locationx:" + location[0] + ",locationy:" + location[1]);
if (location[0] == 0)
return (ScrollView) child;
else
continue;
} else if (child instanceof ViewGroup) {
ScrollView result = findScrollView((ViewGroup) child);
if (result != null)
return result;
}
}
}
return null;
}
声明计算滑动手势的两个点
Down点(x1, y1) Move点(x2, y2)
,这样出现两种情况:向上滑,向下滑
在通过 isAtBottom 方法,判断 RNFixScrollView 是否滑到底部.
public boolean isAtBottom() {
return getScrollY() == getChildAt(getChildCount() - 1).getBottom() + getPaddingBottom() - getHeight();
}
综合上面的已知条件,只需要找出几种临界情况:
RNFixScrolView 已到底部 && 向上滑:不拦截
RNFixScrolView 未到底部 && 向上滑:拦截
RNFixScrolView 未到底部 && 向下滑 && 子 ScrollView 已到顶部:拦截
RNFixScrolView 已到底部 && 向下滑 && 子 ScrollView 未到顶部:不拦截,代码如下:
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (!mScrollEnabled) {
return false;
}
int action = ev.getAction();
if (action == MotionEvent.ACTION_DOWN) {
//当手指按下的时候
x1 = ev.getX();
y1 = ev.getY();
scrollView = findScrollView(this);
isIntercept = false;
}
if ((action == MotionEvent.ACTION_MOVE) || (action == MotionEvent.ACTION_UP)) {
//Tab导航控件是否存在ScrollView
if (scrollView != null) {
//当手指移动或者抬起的时候计算其值
x2 = ev.getX();
y2 = ev.getY();
//判断RNFixScrollView是否到底部
isbottom = isAtBottom();
//向上滑动
if (y1 - y2 > FLING_MIN_DISTANCE ) {
if (!isbottom) {
isIntercept = true;
} else {
isIntercept = false;
}
return isIntercept;
} //向下滑动
else if (y2 - y1 > FLING_MIN_DISTANCE ) {
int st = scrollView.getScrollY();
if (!isbottom) {
isIntercept = true;
} else {
if (st == 0) {
isIntercept = true;
} else {
isIntercept = false;
}
}
return isIntercept;
}
}
}
//不加的话 ReactScrollView滑动不了
if (super.onInterceptTouchEvent(ev)) {
NativeGestureUtil.notifyNativeGestureStarted(this, ev);
ReactScrollViewHelper.emitScrollBeginDragEvent(this);
mDragging = true;
enableFpsListener();
return true;
}
return false;
}
以上代码完成了第一步创建原生固定滚动控件主要逻辑.
2. 创建管理滚动控件 ViewManager 的子类
简单讲下,copy
RN自带的ScrollViewManager
类,修改类名和其他引用到 ScrollViewManager .另外注意修改字段,REACT_CLASS = "RNFixedScrollView",这个与 JS 的模块的名字存在映射.
3. 创建实现了 ReactPackage 接口的类并注册
RNAppViewsPackage 类
public class RNAppViewsPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
return modules;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new RNFixedScrollViewManager()
);
}
}
MainApplication 类进行注册
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNAppViewsPackage()
);
}
4. 实现对应的 JavaScript 模块
简单讲下,copy
RN自带ScrollViewJS的module
,修改注释上 providesModule 的值 RNFixedScrollView 以及导出原生模块的名称,与第二步的值存在映射.
if (Platform.OS === 'android') {
nativeOnlyProps = {
nativeOnly: {
sendMomentumEvents: true,
}
};
AndroidScrollView = requireNativeComponent(
'RNFixedScrollView',
(ScrollView: React.ComponentType<any>),
nativeOnlyProps
);
}
完成上面的内容后,可以通过导入
import RNFixedScrollView from './modules/RNFixedScrollView'
,使用 RNFixedScrollView 控件
测试
为了模拟这个界面,构建了下面的代码,其中 ViewPagerPage 组件是 Tab 导航控件,详细代码请转到 github .
主页面
<View style={styles.container}>
<RNFixedScrollView showsVerticalScrollIndicator={false}>
<View style={{
backgroundColor: '#87cefa',
height: 200,
}}>
</View>
<ViewPagerPage style={{height: windowHeight- 80}}/>
</RNFixedScrollView>
</View>
Tab 导航控件,第二个 tab 内容区域嵌套了 FlatList,其他两个则显示文字.
import {StyleSheet, View, Text, Platform, Image, TouchableOpacity, Animated, Dimensions, FlatList} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
const windowWidth = Dimensions.get('window').width;
export default class ViewPagerPage extends Component {
static title = '<FlatList>';
static description = 'Performant, scrollable list of data.';
state = {
data: this.genItemData(20,0),
debug: false,
horizontal: false,
filterText: '',
fixedHeight: true,
logViewable: false,
virtualized: true,
};
genItemData(loadNum,counts){
let items = [];
for(let i=counts;i<counts+loadNum;i++){
items.push({key:i});
}
return items;
};
_onEndReached(){
this.setState((state) => ({
data: state.data.concat(this.genItemData(10, state.data.length)),
}));
};
render() {
return (
<IndicatorViewPager
style={[{backgroundColor: 'white', flexDirection: 'column-reverse',this.props.style]}
indicator={this._renderTitleIndicator()}
>
<View style={{backgroundColor: 'cornflowerblue'}>
<Text>这里是课程介绍</Text>
</View>
<View style={{backgroundColor: 'cadetblue'}>
<FlatList
ItemSeparatorComponent={() => <View
style={{height: 1, backgroundColor: 'black', marginLeft: 0}}/>}
data={this.state.data}
onEndReached={this._onEndReached.bind(this)}
onEndReachedThreshold={0.2}
renderItem={({item}) => <View
style={{ justifyContent: 'center',height:40,alignItems:'center'}><Text
style={{fontSize: 16}}>{"目录"+item.key}</Text></View>}
/>
</View>
<View style={{backgroundColor: '#1AA094'}>
<Text>相关课程</Text>
</View>
</IndicatorViewPager>
);
}
_renderTitleIndicator() {
return <PagerTitleIndicator style={{
backgroundColor: 0x00000020,
height: 48
}} trackScroll={true} itemStyle={{width: windowWidth / 3}}
selectedItemStyle={{width: windowWidth / 3}} titles={['详情介绍', '目录', '相关课程']}/>;
}
}
总结
从编写玩这个组件在 RN 组件封装还是很有收获的,对于衡量使用不同的方案进行选择也有了体会.
调试代码的时候需要技巧,通过注释不同的代码段,对于渲染不出界面是一种好的方法.
弄清楚原理后编码会少犯很多错误.
参考:
讲讲 Android 事件拦截机制 Android 屏幕手势滑动
来源: https://www.cnblogs.com/lmf-techniques/p/8325200.html