Card 卡片
---
最基础的卡片容器，可承载文字、列表、图片、段落。
### 基础示例
```jsx
import { SafeAreaView, View, Image } from 'react-native';
import { Card } from '@uiw/react-native';
class Demo extends Component {
render() {
return (
)
}
}
```
### 带标题圆角卡片
```jsx
import { SafeAreaView, View, Image } from 'react-native';
import { Card } from '@uiw/react-native';
class Demo extends Component {
render() {
return (
)
}
}
```
### 可点击选中带操作卡片
```jsx
import React, { useState } from 'react';
import { SafeAreaView, View, Image } from 'react-native';
import { Card ,Icon } from '@uiw/react-native';
const Demo = () => {
const [selected, setSelected] = useState(false)
return (
{ setSelected(!selected) }}
>
,
onPress: (e: any, index: number) => { }
},
{
text: '分享',
icon: ,
onPress: (e: any, index: number) => { }
},
]}
/>
)
}
```
### CardProps
```ts
export interface CardProps {
/** 外容器样式（可选） */
containerStyle?: StyleProp;
/** 内容器样式（可选） */
wrapperStyle?: StyleProp;
/** 设置卡片圆角度数（可选） */
borderRadius?: number;
/** 是否选中（可选） */
selected?: boolean;
/** 渲染内容 */
children?: React.ReactNode;
/** 按下卡片时的动作（可选） */
onPress?: TouchableOpacityProps['onPress'];
/** 长按下卡片时的动作（可选） */
onLongPress?: TouchableOpacityProps['onLongPress'];
}
```
### CardTitleProps
```ts
type CardTitleProps = {
title?: string;
titleStyle?: StyleProp
children?: React.ReactNode;
};
```
### CardActionsProps
```ts
type CardActionsProps = {
actions?: Array<{
text?: string;
icon?: JSX.Element;
onPress?: (e: GestureResponderEvent, index: number) => void;
actionsTextStyle?: StyleProp
}>;
actionsContainerStyle?: StyleProp
children?: React.ReactNode;
};
```