基于react native的简单手动切换功能示例

基于react native的简单手动切换功能示例

• • 代码示例
  • matchTab

    代码示例

    import React, {useEffect, useRef, useState} from 'react';import {  Animated,  PanResponder,  StyleSheet,  Text,  View,  Dimensions,  ScrollView,} from 'react-native';import {pxToPd} from '../../common/js/device';import MatchTab from './matchTab';const TestExampleTab = ({navigation}) => {  const [tabCode, setTabCode] = useState(2);  const [tabList, setTabList] = useState([    {      name: '报名中',      code: 2,    },    {      name: '进行中',      code: 3,    },    {      name: '已结束',      code: 8,    },    {      name: '已作废',      code: 11,    },  ]);  //手势滑动区域节点  const animatedViewRef = useRef(null);  //单个切换页面的宽度  const deviceWidth = Dimensions.get('window').width;  // 默认显示下标的页面  let currentIndexRef = useRef(0);  //滑动的距离  const defaultMove = -currentIndexRef.current * deviceWidth;  const pan = useRef(new Animated.Value(defaultMove)).current;  const panResponder = useRef(    PanResponder.create({      onStartShouldSetPanResponder: () => true,      //处理手势移动事件，其中使用了`dx`参数来表示在x轴上的移动距离      onPanResponderMove: (evt, gestureState) => {        //获取当前滚动区域有几个孩子节点        const count = animatedViewRef.current._children.length;        //每次移动的距离        const moveX = -currentIndexRef.current * deviceWidth;        //当移动到最左侧或者最右侧时，禁止拖动        const start = currentIndexRef.current == 0 && gestureState.dx > 0;        const end = currentIndexRef.current == count - 1 && gestureState.dx  {        //获取当前滚动区域有几个孩子节点        const count = animatedViewRef.current._children.length;        //当手指拖动区域大于100的时候，开始切换页面        if (Math.abs(gestureState.dx) > 100) {          let newPageIndex = currentIndexRef.current;          if (gestureState.dx > 0) {            newPageIndex = Math.max(0, currentIndexRef.current - 1);          } else {            newPageIndex = Math.min(count - 1, currentIndexRef.current + 1);          }          const moveX = -newPageIndex * deviceWidth;          currentIndexRef.current = newPageIndex;          pan.setValue(moveX);        } else {          pan.setValue(-currentIndexRef.current * deviceWidth);        }        setTabCode(() => tabList[currentIndexRef.current].code);      },    }),  ).current;  //tab切换  const tabChangeHandle = row => {    setTabCode(() => row.status);    let subscript = tabList.findIndex(item => item.code == row.status);    currentIndexRef.current = subscript;    pan.setValue(-subscript * deviceWidth);  };  useEffect(() => {    return () => {};  }, []);  return (          {/* tab */}                                  {            width: deviceWidth * tabList.length,            flex: 1,            flexDirection: 'row',            transform: [{translateX: pan}],            onStartShouldSetResponderCapture: () => false, // 禁止拦截触摸事件          }}          {...panResponder.panHandlers}>          {width: deviceWidth, backgroundColor: 'red'}}            item One                    {width: deviceWidth}}            item Two                    {width: deviceWidth, backgroundColor: 'green'}}            item Three                    {width: deviceWidth}}            item Four                              );};const styles = StyleSheet.create({  // tab  tabWrap: {    width: '100%',    height: pxToPd(80),  },  wraper: {    flex: 1,    backgroundColor: '#fff',  },});export default TestExampleTab;

    matchTab

    import React, {useRef, useState} from 'react';import {  Image,  ScrollView,  StyleSheet,  Text,  TouchableOpacity,  View,} from 'react-native';import {pxToPd} from '../../common/js/device';const MatchTabItem = ({item, current, onClick}) => {  const tabItemClickHandle = row => {    onClick && onClick(row);  };  return (           {          tabItemClickHandle(item);        }}>        {item.code == current ? (                      {item.name}                              ) : (                      {item.name}                  )}            );};const MatchTab = ({onClick, list = [], code = 2}) => {  //点击tab切换  const tabClickHandle = row => {    onClick &&      onClick({        type: 'status',        status: row.code,      });  };  return (                                        {list.map(item => (                          ))}                              );};const styles = StyleSheet.create({  matchTab: {    width: '93.6%',    marginLeft: '3.2%',    flexDirection: 'row',  },  matchTabMenu: {    flex: 1,  },  matchTabFilter: {    width: pxToPd(120),    flexDirection: 'row',    justifyContent: 'flex-end',    alignItems: 'center',  },  filterIcon: {    width: pxToPd(32),    height: pxToPd(32),  },  filterText: {    fontSize: pxToPd(26),    fontWeight: '400',    color: '#333',    marginLeft: pxToPd(10),  },  filterTextok: {    fontSize: pxToPd(26),    fontWeight: '400',    color: '#FFA157',    marginLeft: pxToPd(10),  },  tabItem: {    height: pxToPd(70),    position: 'relative',    alignItems: 'center',    justifyContent: 'center',    marginRight: pxToPd(40),  },  tabItemName: {    fontSize: pxToPd(26),    fontWeight: '400',    color: '#333',  },  tabItemNameCurrent: {    fontSize: pxToPd(30),    fontWeight: '500',    color: '#ff9f50',  },  tabLine: {    width: pxToPd(32),    height: pxToPd(6),    backgroundColor: '#ffa157',    borderRadius: pxToPd(3),    position: 'absolute',    left: '50%',    marginLeft: -pxToPd(16),    bottom: 0,  },});export default MatchTab;

    （）（）