React Native中如何绘制黑色边框、中心透明的矩形？

方案一：用View组件快速实现 #

这是最直接的方式，不需要额外依赖，靠原生样式就能搞定：

import { View } from 'react-native';

// 直接在你的组件里使用
<View
  style={{
    width: 200,
    height: 150,
    borderWidth: 2, // 边框粗细
    borderColor: 'black', // 边框颜色
    backgroundColor: 'transparent', // 中心设为透明
  }}
/>

方案二：用Expo Canvas绘制（如果用Canvas场景） #

如果是用Expo的Canvas API画矩形，别用fillRect填充整个区域，改用strokeRect只画边框，同时把填充色设为透明：

import { Canvas, Rect } from 'react-native-canvas';

// 在组件中使用Canvas
<Canvas style={{ width: 200, height: 150 }}>
  <Rect
    x={0}
    y={0}
    width={200}
    height={150}
    stroke="black"
    strokeWidth={2}
    fill="transparent" // 中心不填充
  />
</Canvas>

之前的代码应该是用了填充操作（比如fillRect），导致整个矩形被颜色覆盖，改成只描边+透明填充就能实现你要的效果。

内容的提问来源于stack exchange，提问作者219CID