将图片而不是字符串标题添加到react-native-segmented control-tab中

import React from 'react';
import { View, TouchableOpacity, Image, StyleSheet } from 'react-native';

const CustomSegmentedControlTab = ({ tabs, selectedIndex, onPress }) => {
  return (
    <View style={styles.container}>
      {tabs.map((tab, index) => (
        <TouchableOpacity
          key={index}
          style={[
            styles.tab,
            index === selectedIndex ? styles.selectedTab : null,
          ]}
          onPress={() => onPress(index)}
        >
          <Image source={tab.image} style={styles.tabImage} />
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
    borderRadius: 8,
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  tab: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  selectedTab: {
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  tabImage: {
    width: 24,
    height: 24,
  },
});

export default CustomSegmentedControlTab;

import React, { useState } from 'react';
import { View, Image } from 'react-native';
import CustomSegmentedControlTab from './CustomSegmentedControlTab';

const App = () => {
  const tabs = [
    { image: require('./images/tab1.png') },
    { image: require('./images/tab2.png') },
    { image: require('./images/tab3.png') },
  ];

  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleTabPress = (index) => {
    setSelectedIndex(index);
  };

  return (
    <View>
      <CustomSegmentedControlTab
        tabs={tabs}
        selectedIndex={selectedIndex}
        onPress={handleTabPress}
      />
      {/* 其他组件内容 */}
    </View>
  );
};

export default App;