React Native Skia高性能 React Native 图形库
React Native Skia 是高性能的 2D 图形库,将 Skia 项目带到了 React Native 平台。Skia 是 Chrome、Chrome OS、Android、Flutter、Mozilla Firefox 和 Firefox OS 以及许多其他产品使用的图形引擎。
示例
声明式 API
import {Canvas, Circle, Group} from "@shopify/react-native-skia";
export const HelloWorld = () => {
const width = 256;
const height = 256;
const r = 215;
return (
<Canvas style={{ flex: 1 }}>
<Group blendMode="multiply">
<Circle cx={r} cy={r} r={r} color="cyan" />
<Circle cx={width - r} cy={r} r={r} color="magenta" />
<Circle
cx={width/2}
cy={height - r}
r={r}
color="yellow"
/>
</Group>
</Canvas>
);
};
命令式 API
import {Skia, BlendMode, SkiaView, useDrawCallback} from "@shopify/react-native-skia";
const paint = Skia.Paint();
paint.setAntiAlias(true);
paint.setBlendMode(BlendMode.Multiply);
export const HelloWorld = () => {
const width = 256;
const height = 256;
const r = 215;
const onDraw = useDrawCallback((canvas) => {
// Cyan Circle
const cyan = paint.copy();
cyan.setColor(Skia.Color("cyan"));
canvas.drawCircle(r, r, r, cyan);
// Magenta Circle
const magenta = paint.copy();
magenta.setColor(Skia.Color("magenta"));
canvas.drawCircle(width - r, r, r, magenta);
// Yellow Circle
const yellow = paint.copy();
yellow.setColor(Skia.Color("yellow"));
canvas.drawCircle(width/2, height - r, r, yellow);
});
return (
<SkiaView style={{ flex: 1 }} onDraw={onDraw} />
);
};
评论
React Native Desktop
ReactNativeDesktop可以让你用ReactNative技术构建OSX下的桌面应用程序。示例代码:<View> <Button onClick={() => al
React Native Desktop
0
marvel-React Native漫威React Native App
项目介绍 一个在F8基础上照猫画虎的漫威ReactNativeApp.支持Android和IOS。想要自己运行app的话,到http://developer.marvel.com/ 上申请API
marvel-React Native漫威React Native App
0
React Native用 React 编写移动应用
ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且ReactNative已经用于生产环境——FacebookGroupsiO
React Native用 React 编写移动应用
0
React Native用 React 编写移动应用
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和
React Native用 React 编写移动应用
0
FormikReact 和 React Native 开源表单库
Formik 是世界上最流行的 React 和 React Native 开源表单库。在 React
FormikReact 和 React Native 开源表单库
0