如何在react原生中制作像bootstrap一样自定义卡片

import React from 'react';
import styled from 'styled-components';

// Card组件样式
const CardWrapper = styled.div`
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
`;

const Title = styled.h3`
  font-size: 18px;
  margin-bottom: 8px;
`;

const Image = styled.img`
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
`;

const Description = styled.p`
  font-size: 14px;
  color: #666;
`;

// Card组件
const Card = (props) => {
  const { title, image, description } = props;

  return (
    <CardWrapper>
      {image && <Image src={image} alt={title} />}
      <Title>{title}</Title>
      <Description>{description}</Description>
    </CardWrapper>
  );
};

export default Card;

import React from 'react';
import Card from './Card';

const App = () => {
  return (
    <div>
      <Card
        title="Card标题"
        image="https://example.com/image.jpg"
        description="这是一个示例卡片描述。"
      />
    </div>
  );
};

export default App;