探秘Teaset：React Native的UI组件库

import React from 'react';
import { View, Text, Image } from 'react-native';
import { useTheme } from '@teaset/themes';
 
// 自定义的Card组件
export const CustomCard = ({ title, description, image }) => {
  // 使用当前的主题配色
  const theme = useTheme();
 
  return (
    <View style={{ backgroundColor: theme.cardBackgroundColor, borderRadius: 5, overflow: 'hidden' }}>
      <Image source={image} style={{ height: 150, width: '100%', borderTopRightRadius: 5, borderTopLeftRadius: 5 }} />
      <View style={{ padding: 15 }}>
        <Text style={{ color: theme.cardTitleColor, fontSize: 18 }}>{title}</Text>
        <Text style={{ color: theme.cardDescriptionColor, marginTop: 5 }}>{description}</Text>
      </View>
    </View>
  );
};

这个代码实例展示了如何在React Native应用中使用Teaset UI组件库创建一个自定义的卡片组件。它使用了useTheme钩子从Teaset主题系统中获取当前主题的配色，并将这些配色应用到自定义的Card组件的布局和样式中。这样，无论用户切换到何种主题，卡片组件都会自适应主题的配色。