具体可以参考我以前写的事件分发机制学习。
回过头来讲外层滚动容器通知内层滚动,其实通知滚动相当于不拦截事件,那么就是重写 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上要做的事
开始动手
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 屏幕手势滑动
优质内容筛选与推荐>>
1、DDD领域驱动之干货(三)完结篇!2、廖雪峰py笔记6,调用函数3、while练习4、scikit-learn 支持向量机算法库使用小结5、TLS1.3&TLS1.2形式化分析(二)