react-native实现多列表左右滑动+滚动TabBar悬停

用到的组件

rn版本：0.70.6
“react-native-tab-view”: “3.5.2”,

页面效果

初始状态：

滚动后：

左滑动到右边列表状态：

实现思路

使用react-native-tab-view实现左右切换，但是不能使用renderTabBar，因为tabBar会始终显示在列表顶部，不能跟着列表进行滚动，顶部蓝色区域+红色tabbar总高度400（tabbar高度50），然后通过Animated动画+FlatList的onScroll设置动画的值，让顶部区域网屏幕外移出或移入，当滚动超过350（总高度400-tabbar高度50）就将已经准备好的另一个tabbar显示出来，这样就可以实现这样的滚动悬停效果

完整实现代码，可直接使用，需要集成前置组件react-native-tab-view

import React, {useRef, useState, useCallback} from 'react';
import {View, Animated, Easing, Dimensions, Text} from 'react-native';
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';const {width} = Dimensions.get('window');const ChatFlatList = () => {const [tabId, setTabId] = useState(0);const [routes] = useState([{key: 'tab1', title: 'Tab 1'},{key: 'tab2', title: 'Tab 2'},]);const [sy1, setScrollY1] = useState(0);const [sy2, setScrollY2] = useState(0);const listRef1 = useRef<any>(null);const listRef2 = useRef<any>(null);const [tabBarVisible, setTabBarVisible] = useState(false);const scrollY = useRef(new Animated.Value(0)).current;// 顶部 View 的 translateYconst headerTranslateY = scrollY.interpolate({inputRange: [0, 400],outputRange: [0, -400],extrapolate: 'clamp',});const tabViewMarginTop = scrollY.interpolate({inputRange: [0, 400],outputRange: [400, 0], // 当 scrollY=0 时 marginTop=400；当 scrollY=400 时 marginTop=0extrapolate: 'clamp',});const renderTabContent = useCallback((data: any, tid: number) => (<Animated.FlatListref={tid == 1 ? listRef1 : listRef2}data={data}onScroll={Animated.event([{nativeEvent: {contentOffset: {y: scrollY}}}],{useNativeDriver: true,// ✅ 安全地监听滚动，不影响性能listener: (event: any) => {const y = event.nativeEvent.contentOffset.y;setTabBarVisible(y >= 350);if (tid == 1) {setScrollY1(y);} else {setScrollY2(y);}},},)}scrollEventThrottle={16}renderItem={({item, index}) => (<Viewstyle={[{height: 60, backgroundColor: '#f0f0f0', marginVertical: 2},index == 0 && {marginTop: 400},]}><Text>Item {item}</Text></View>)}keyExtractor={item => item.toString()}/>),[scrollY],);const renderScene = useCallback(SceneMap({tab1: () => renderTabContent([...Array(50).keys()], 1),tab2: () => renderTabContent([...Array(30).keys()], 2),}),[],);return (<>{/* 顶部可滚动的 View */}<Animated.Viewstyle={{position: 'absolute',top: 0,left: 0,right: 0,height: 400,backgroundColor: 'skyblue',zIndex: 1,transform: [{translateY: headerTranslateY}],}}>{/* <Text style={{fontSize: 20, marginTop: 200, textAlign: 'center'}}>滚动时会上移</Text> */}<View style={{height: 350, width: '100%'}}></View><Viewstyle={{height: 50, width: '100%', backgroundColor: 'red'}}></View></Animated.View><Viewstyle={{position: 'absolute',top: 0,left: 0,height: 50,width: '100%',backgroundColor: 'red',zIndex: 10,opacity: tabBarVisible ? 1 : 0,}}></View>{/* TabView */}<TabViewnavigationState={{index: tabId, routes}}renderScene={renderScene}onIndexChange={(index: number) => {console.log('index', index, 'sy1', sy1, 'sy2', sy2);//切换到当前第一个列表if (index == 0) {//如果第二个列表滚动位置小于400，滚动到第二个列表的位置if (sy2 < 400) {listRef1?.current?.scrollToOffset({offset: sy2, animated: false});} else if (sy1 < 400) {//第二个列表滚动超过400，需要判断第一个列表滚动位置是否小于400，如果小于400则滚动到400，否则不动listRef1?.current?.scrollToOffset({offset: 400, animated: false});}} else if (index == 1) {//切换到当前第二个列表//如果第一个列表滚动位置小于400，滚动到第一个列表的位置if (sy1 < 400) {listRef2?.current?.scrollToOffset({offset: sy1, animated: false});} else if (sy2 < 400) {//第一个列表滚动超过400，需要判断第二个列表滚动位置是否小于400，如果小于400则滚动到400，否则不动listRef2?.current?.scrollToOffset({offset: 400, animated: false});}}setTabId(index);}}initialLayout={{width}}renderTabBar={props => null}/></>);
};export default ChatFlatList;