当前位置：首页 > 软件库 > 程序开发 > 图形/图像处理 >

React Native Skia

高性能 React Native 图形库

授权协议 MIT

开发语言 TypeScript

所属分类程序开发、图形/图像处理

软件类型开源软件

地区不详

投递者方建明

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

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 | 初代渲染器

小手动一动，点赞转发加关注。微信搜索【大前端杂货铺】公众号关注大前端老司机带您遨游大前端知识的海洋。关注 Github https://github.com/big-frontend 还有大前端代码实践哦。名词解释渲染器renderer: 使用React 提供的npm包react-reconciler 可以自定义渲染器renderer，React Native渲染器的npm包为react-na
React Native和Flutter语言如何选择

为了一份代码能够运行在多个平台，从而节省开发和沟通成本，各公司都开始关注和使用跨端方案。目前，主流的跨端方案，主要分为两种：一种是，将 JavaScriptCore 引擎当作虚拟机的方案，代表框架是 React Native；另一种是，使用非 JavaScriptCore 虚拟机的方案，代表框架是 Flutter。使用跨端方案进行开发，必然会替代原有平台的开发技术，所以我们在选择跨端方案时，不能
react native gradle报错问题

前几天开发RN，gradle的jcenter里面报了个兼容性问题。 What went wrong: A problem occurred configuring root project ‘gst’. Could not resolve all dependencies for configuration ‘:classpath’. Could not resolve com.androi
【React Native】VS【Flutter】

本文将对当前主流的跨端技术框架【React Native】和【Flutter】进行分析和比较，以帮助开发者选择最适合自己的框架。一、React Native React Native是Facebook推出的一款跨平台应用开发框架，它基于React，使用JavaScript编写，可以同时支持iOS和Android平台应用的开发。 React Native的主要优点和缺点如下：优点： ①、跨平台支
React Native Component

UI显示流程： Android：通过layout布局决定UI效果，其中样式文件与界面元素写在布局中更新的功能写在代码中备注：真正的状态机制是只数据状态周期，有传递性，也能因为数据改变了影响UI。在Android是没有这种设计的。 Reative Native：Virtual Dom 树。 Vue用于PC端，重绘整个Dom树，React Native避免了重新绘制DOM，通过DOM映射成原生空间
React Native，Flutter，相比于iOS原生的性能

一：现在越来越流行跨端夸平台，也就是大前端开发，开发框架一类是React Native的，另一种是基于WebView的。 1：React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架，RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域 2：Flutter是谷歌的
uni-app,Taro,react native和flutter的区别

最近开发一个新项目，在考虑技术选型，现有uni-app，Taro，RN，flutter，客观比较一下 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架
Flutter 、Vue、React Native 、Weex哪个好

跨平台项目GSYGithubApp系列三大开源版本比较（Flutter 、React Native 、Weex） vue react angularjs这三个是同一类型，是js框架，框架的目的是简化开发，但是这几个框架都是针对传统网页开发，直接用在移动端一个是慢，另一个是有些功能不适配。weex和react native是基于vue和react改造的移动端混合开发框架，把网页包装成app，可以通过

React Native Skia

同类工具

相关阅读

相关文章

相关问答

相关文档