React Native 可滚动 TabBar 的实现

在 React Native 的移动端开发中，TabBar 是非常常见的一种导航方式。但是，如果在 TabBar 中的选项过多，其布局就会变得非常臃肿。因此，本文将介绍如何实现可滚动的 TabBar，在多选项的情况下展示更加优雅。

常规 TabBar 的问题

在常规的 TabBar 中，当选项过多时，会出现以下问题：

1. 布局臃肿不美观
2. 选项过多，导致不方便用户选择
3. 选项卡变得不可滚动，不能够很好的展示所有选项

因此，我们需要实现一个可滚动的 TabBar 以解决这个问题。

实现思路

要实现可滚动的 TabBar，我们需要做以下几个步骤：

1. 获取设备屏幕的宽度，并计算出单个选项所占的宽度
2. 渲染 TabBar，并根据屏幕宽度计算出最多能够显示多少个选项
3. 根据显示数量来动态调整选项卡的宽度和位置
4. 如果选项超过了显示数量，则增加滚动条并实现滚动功能

实现代码

以下是一个可滚动的 TabBar 的实现代码，该代码支持动态调整选项卡的宽度和位置，同时实现了滚动功能。

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

const TabBar = ({ tabs, activeTab, onTabChange }) => {
  const [tabWidth, setTabWidth] = useState(Dimensions.get('screen').width / 4);
  const [visibleTabs, setVisibleTabs] = useState(4);
  const [scrollEnabled, setScrollEnabled] = useState(false);
  const scrollViewRef = useRef();

  useEffect(() => {
    const screenWidth = Dimensions.get('screen').width;
    const newTabWidth = screenWidth / visibleTabs;
    setTabWidth(newTabWidth);
  }, [visibleTabs]);

  useEffect(() => {
    if (tabs.length > visibleTabs) {
      setScrollEnabled(true);
    } else {
      setScrollEnabled(false);
    }
  }, [tabs, visibleTabs]);

  const handleScroll = event => {
    const contentOffset = event.nativeEvent.contentOffset.x;
    const index = Math.round(contentOffset / tabWidth);
    onTabChange(index);
  };

  const handleTabPress = index => {
    onTabChange(index);
    scrollViewRef.current.scrollTo({ x: index * tabWidth });
  };

  const renderTab = (tab, index) => {
    const isActive = index === activeTab;

    return (
      <TouchableOpacity
        key={tab.title}
        style={[styles.tab, { width: tabWidth }]}
        onPress={() => handleTabPress(index)}
      >
        <Text style={[styles.tabTitle, isActive && styles.activeTabTitle]}>{tab.title}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      scrollEnabled={scrollEnabled}
      ref={scrollViewRef}
      onScroll={handleScroll}
      style={styles.tabBar}
      contentContainerStyle={{ paddingHorizontal: 16 }}
    >
      {tabs.map(renderTab)}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: '#f7f7f7',
    height: 48,
  },
  tab: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabTitle: {
    fontSize: 16,
    color: '#444',
  },
  activeTabTitle: {
    color: '#007aff',
  },
});

export default TabBar;

使用该组件时，只需要传入 tabs 数组、当前选中的 activeTab、以及 onTabChange 函数即可。

// www.javascriptcn.com code example
const tabs = [
  { title: 'Tab 1', key: 'tab1' },
  { title: 'Tab 2', key: 'tab2' },
  { title: 'Tab 3', key: 'tab3' },
  { title: 'Tab 4', key: 'tab4' },
  { title: 'Tab 5', key: 'tab5' },
  { title: 'Tab 6', key: 'tab6' },
  { title: 'Tab 7', key: 'tab7' },
  { title: 'Tab 8', key: 'tab8' },
];

const [activeTab, setActiveTab] = useState(0);

<TabBar tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />

结语

可滚动的 TabBar 在移动端开发中应用广泛，可以解决选项卡过多时的布局臃肿和不美观的问题。本文介绍了如何实现一个可滚动的 TabBar，并提供了代码示例，希望对大家的学习和应用有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d77722a941bf7134d6270c