@cometchat/cards- react-inative (英语)
彗星卡Schema的回放原生渲染器. 传入名片JSON,取回一棵本土取景树. 交互式元素的磁带通过一个回调程序向您的应用程序发射——软件包从不执行动作本身.
它会做什么
- 将卡片 Schema JSON 切入打入型号
- 渲染20个元素类型(文本、图像、图标、相机、徽章、分隔器、空间器、芯片、进步栏、代码Block、标记下、行、列、网格、手风琴、分页、按钮、图标按钮、链接、表格)
- 决定认识到主题颜色和图像 URL
auto, (中文(简体) ),light,以及dark模式,可选主题覆盖 - 点击按钮、图标按钮和链接
onAction以键入方式调用CometChatCardActionEvent编号
包裹是一个纯粹的渲染器. 它不与"彗星Chat SDK"对话,不管理信息生命周期,也不知道你的应用的导航. 每个动作都由你决定.
安装
npm install @cometchat/cards-react-native
同伴依赖关系 (必须是在您的项目):
{
"react": ">=18.0.0",
"react-native": ">=0.76.0"
}
使用量
import { CometChatCardView } from '@cometchat/cards-react-native';
function CardScreen({ cardJson }: { cardJson: string }) {
return (
<CometChatCardView
cardJson={cardJson}
themeMode="auto"
onAction={(event) => {
// Handle the action — navigate, send a message, open a URL, etc.
console.log(`action: ${event.action.type} from ${event.elementId}`);
}}
/>
);
}
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
cardJson | string | —— 说 | 卡片Schema JSON字符串( 需要) |
themeMode | 'auto' | 'light' | 'dark' | 'auto' | 主题模式. auto 遵循设备系统主题. |
onAction | (event: CometChatCardActionEvent) => void | —— 说 | 当用户使用带有有效动作的互动元素时, 调用已启动 |
onContainerStyle | (style: CometChatCardResolvedContainerStyle) => void | —— 说 | 表示卡片的解析容器样式(背景、边框Radius、垫板等),供消费者向母包申请 |
themeOverride | CometChatCardThemeOverride | —— 说 | 覆盖默认主题符号( 颜色, 打印) |
logLevel | 'none' | 'error' | 'warning' | 'verbose' | 'warning' | 控制内部记录动词 |
他们
当JSON省略颜色时,渲染器会倒回内置的默认主题. 要推翻默认,请通过 themeOverride数字 :
<CometChatCardView
cardJson={cardJson}
themeMode="dark"
themeOverride={{
textColor: { light: '#141414', dark: '#F5F5F5' },
buttonFilledBg: { light: '#1A73E8', dark: '#8AB4F8' },
}}
/>
任意 ColorValue 计划是解决 light 或者说 dark 基于有效主题模式的变量.
行动
当用户点击时 button, (中文(简体) ), iconButton,或 link,软件包引用 onAction 带有 CometChatCardActionEvent 包含:
action——全动作对象(类型+所有参数)elementId被窃听元素的编号cardJson- 动作来自JSON的卡片
支持的行动类型 : openUrl, (中文(简体) ), copyToClipboard, (中文(简体) ), downloadFile, (中文(简体) ), apiCall, (中文(简体) ), chatWithUser, (中文(简体) ), chatWithGroup, (中文(简体) ), sendMessage, (中文(简体) ), initiateCall, (中文(简体) ), customCallback。 。 。 .
如果你不通过 onAction水龙头被忽略了.
容器样式
这个 onContainerStyle 调用后释放卡片根容器样式, 颜色已经为当前主题模式解决 :
const [bubbleStyle, setBubbleStyle] = useState({});
<View style={bubbleStyle}>
<CometChatCardView
cardJson={cardJson}
themeMode="auto"
onContainerStyle={(style) => setBubbleStyle({
backgroundColor: style.background, // already resolved hex string
borderRadius: style.borderRadius,
borderColor: style.borderColor,
})}
/>
</View>
这在将卡片嵌入到信息泡中时是有用的——气泡包可以匹配卡片的视觉设置.
无依赖
该套件除了React和React Introduct之外,没有运行时间依赖性. 图像加载使用 RN 内置 <Image>,动画使用 Animated,可使用自定义内置解析器来解析标记,而闪光的占位符则使用本地视图来解析.
再来
见 CardRendererDemo/ 用于可运行样品的应用程序和用于全面参考计划的设计文件.