自定义函数组件

进阶 · 完整可运行示例

把重复的数据列封装成一个函数组件，集中管理字号、颜色和缺测显示。

iOS 原生截图

完整源码

下载可导入 ZIP · 下载 JSX 源码

复制代码到新建仪表，或在 App 内导入 ZIP。

function Metric({label,value,unit}) {
  return <VStack spacing={6}>
    <Text fontSize={11} color={$env.accent}>{label}</Text>
    <Text fontSize={28} fontDesign="rounded" color={$env.foreground}
      contentAnimation={{type:'numericText'}}>{value===null?'—':value}</Text>
    <Text fontSize={10} color={$env.foreground}>{unit}</Text>
  </VStack>;
}
function main() {
  const r=$data.current;
  return <CardContent title="三项读数">
    <HStack spacing={22}>
      <Metric label="速度" value={r.speed===null?null:Math.round(r.speed)} unit={r.speedUnit}/>
      <Metric label="G 值" value={r.gForce===null?null:r.gForce.toFixed(2)} unit="G"/>
      <Metric label="方位" value={r.heading===null?null:Math.round(r.heading)} unit="°"/>
    </HStack>
  </CardContent>;
}

可以先改这些地方

位置	作用	修改建议
Metric 内的字号与颜色	同时影响所有数据列	不需要复制修改三次
HStack spacing	列间距	小卡片上可能需要减小

在 App 中检查

1. 每一列可独立显示 —。
2. 修改 Metric 一处时，所有列风格应同步变化。

相关参考

JSX 函数组件