64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
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) => {
|
|
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;
|