bw-expo-app/components/CategoryTabs.example.tsx

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import CategoryTabs from './CategoryTabs';

interface Category {
  id: string;
  name: string;
}

const ExampleScreen: React.FC = () => {
  const [activeCategoryId, setActiveCategoryId] = useState<string>('all');

  const categories: Category[] = [
    { id: 'all', name: '全部' },
    { id: 'finance', name: '财经' },
    { id: 'entertainment', name: '娱乐' },
    { id: 'education', name: '教育' },
    { id: 'technology', name: '科技' },
    { id: 'sports', name: '体育' },
    { id: 'lifestyle', name: '生活' },
    { id: 'travel', name: '旅行' },
    { id: 'health', name: '健康' },
    { id: 'food', name: '美食' },
  ];

  const handleCategoryChange = (category: Category) => {
    console.log('切换到分类:', category);
    setActiveCategoryId(category.id);
  };

  return (
    <View style={styles.container}>
      <CategoryTabs
        categories={categories}
        activeId={activeCategoryId}
        onChange={handleCategoryChange}
      />

      <View style={styles.content}>
        <Text style={styles.contentText}>
          当前选中: {categories.find(cat => cat.id === activeCategoryId)?.name}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  contentText: {
    fontSize: 16,
    color: '#333333',
  },
});

export default ExampleScreen;