如何使用React Native实现Twitter同款Segmented Control分段控制器

实现方案 #

推荐使用官方维护的@react-native-segmented-control/segmented-control跨端包，调整对应样式属性即可完美匹配目标效果，核心配置步骤如下：

1. 安装依赖 #

npm install @react-native-segmented-control/segmented-control
# 或者使用yarn
yarn add @react-native-segmented-control/segmented-control

2. 关键样式配置 #

按照图示效果，对应属性按如下参数设置即可：

• 组件整体backgroundColor设为浅灰色#f5f5f5，匹配未选中状态的背景
• tintColor设为纯白色#ffffff，作为选中项的背景色
• borderRadius设为8，和图示圆角一致，同时设置borderWidth为0去掉iOS端默认自带的边框
• 字体相关：未选中字体颜色设为#666666，选中字体颜色设为#000000，字重统一用常规400，字号设为14即可

3. 示例代码 #

import { useState } from 'react';
import SegmentedControl from '@react-native-segmented-control/segmented-control';
import { View } from 'react-native';

const SegmentedDemo = () => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const tabs = ['热门', '关注', '附近', '直播'];

  return (
    <View style={{ width: '90%', alignSelf: 'center', marginVertical: 10 }}>
      <SegmentedControl
        values={tabs}
        selectedIndex={selectedIndex}
        onChange={(event) => {
          setSelectedIndex(event.nativeEvent.selectedSegmentIndex);
        }}
        backgroundColor="#f5f5f5"
        tintColor="#ffffff"
        borderRadius={8}
        borderWidth={0}
        fontStyle={{ color: '#666666', fontSize: 14 }}
        activeFontStyle={{ color: '#000000', fontSize: 14 }}
      />
    </View>
  );
};

如果后续有更高的自定义需求，也可以自行封装分段组件：外层用View做背景容器，内部每个选项用Pressable实现，选中态用Animated实现滑块平移效果，整体代码量不超过100行，样式完全可控。

内容的提问来源于stack exchange，提问作者zeke1