react native中如何实现tab切换页面以及页面可以左右滑动效果

react native中如何实现tab切换页面以及页面可以左右滑动效果

效果示例图

主体代码

复制代码
import React, {useRef, useState} from 'react';
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  Dimensions,
  Animated,
} from 'react-native';
import {pxToPd} from '../../common/js/device';
import MatchTab from './matchTab';

const TabOne = () => {
  return (
    <>
      <View style={styles.page}>
        <Text style={styles.title}>全部</Text>
      </View>
    </>
  );
};
const TabTwo = () => {
  return (
    <>
      <View style={styles.page}>
        <Text style={styles.title}>新闻</Text>
      </View>
    </>
  );
};
const TabThree = () => {
  return (
    <>
      <View style={styles.page}>
        <Text style={styles.title}>资讯</Text>
      </View>
    </>
  );
};
const TabFour = () => {
  return (
    <>
      <View style={styles.page}>
        <Text style={styles.title}>小说</Text>
      </View>
    </>
  );
};

const TestExample = () => {
  const [tabCode, setTabCode] = useState(2);
  const [tabList, setTabList] = useState([
    {
      name: '全部',
      code: 2,
    },
    {
      name: '新闻',
      code: 3,
    },
    {
      name: '资讯',
      code: 8,
    },
    {
      name: '小说',
      code: 11,
    },
  ]);
  const scrollViewRef = useRef(null);
  let currentIndexRef = useRef(0);

  // 滚动视图的水平偏移量
  const scrollX = useState(new Animated.Value(0))[0];

  // 页面切换时的处理函数
  const handlePageChange = event => {
    const offsetX = event.nativeEvent.contentOffset.x;
    const pageIndex = Math.round(offsetX / Dimensions.get('window').width);
    currentIndexRef.current = pageIndex;
    setTabCode(() => tabList[currentIndexRef.current].code);
  };
  //tab切换时的处理函数
  const tabChangeHandle = row => {
    setTabCode(() => row.status);
    let subscript = tabList.findIndex(item => item.code == row.status);
    scrollViewRef.current.scrollTo({
      x: subscript * Dimensions.get('window').width,
      animated: false, //去掉过渡效果
    });
  };

  return (
    <>
      {/* tab */}
      <View style={styles.tabWrap}>
        <MatchTab list={tabList} code={tabCode} onClick={tabChangeHandle} />
      </View>
      <View style={styles.container}>
        <ScrollView
          ref={scrollViewRef}
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event(
            [{nativeEvent: {contentOffset: {x: scrollX}}}],
            {
              useNativeDriver: false,
              listener: handlePageChange,
            },
          )}
          scrollEventThrottle={16}>
          <TabOne />
          <TabTwo />
          <TabThree />
          <TabFour />
        </ScrollView>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  // tab
  tabWrap: {
    width: '100%',
    height: pxToPd(80),
  },
  container: {
    flex: 1,
  },
  page: {
    borderColor: 'red',
    borderStyle: 'solid',
    borderWidth: pxToPd(1),
    width: Dimensions.get('window').width,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default TestExample;
相关推荐
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化
GDAL7 小时前
Knockout-ES5 入门教程
javascript·knockout
正义的大古7 小时前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<7 小时前
Electron下载失败
前端·javascript·electron
EndingCoder7 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
子兮曰7 小时前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
NeverSettle_7 小时前
React工程实践面试题深度分析2025
javascript·react.js
大可门耳8 小时前
qt调用cef的Demo,实现js与C++之间的交互细节
javascript·c++·经验分享·qt
烛阴8 小时前
【TS 设计模式完全指南】TypeScript 装饰器模式的优雅之道
javascript·设计模式·typescript
aidingni8888 小时前
掌握 JavaScript 中的 Map 和 Set
前端·javascript