盒子

在 React Native Skia 中，一个盒子是一个矩形或圆角矩形。目前它可以用于提供快速的内部阴影基元。未来它可能会有一些其他功能。

名称	类型	描述
box	SkRect 或 SkRRect	要绘制的圆角矩形
children?	BoxShadow	缩放后绘制的边界矩形

Box 组件接受 BoxShadow 组件作为子组件。

名称	类型	描述
dx?	number	阴影的 X 偏移量。
dy?	number	阴影的 Y 偏移量。
blur	number	阴影的模糊半径
color	颜色	投影的颜色
inner?	boolean	阴影绘制在输入内容内
spread?	number	如果为 true，则结果不包含输入内容

示例

tsx
import {Canvas, Box, BoxShadow, Fill, rrect, rect} from "@shopify/react-native-skia";
 
export const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Fill color="#add8e6" />
    <Box box={rrect(rect(64, 64, 128, 128), 24, 24)} color="#add8e6">
      <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" inner />
      <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" inner />
      <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" />
      <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" />
    </Box>
  </Canvas>
);

tsx
import {Canvas, Box, BoxShadow, Fill, rrect, rect} from "@shopify/react-native-skia";
 
export const Demo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Fill color="#add8e6" />
    <Box box={rrect(rect(64, 64, 128, 128), 24, 24)} color="#add8e6">
      <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" inner />
      <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" inner />
      <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" />
      <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" />
    </Box>
  </Canvas>
);

结果