apa itu lakaran tindak balas

lakaran tindak balas ialah alat untuk memaparkan komponen tindak balas kepada lakaran Ia adalah perpustakaan sumber terbuka; ia boleh menulis komponen React yang mematuhi spesifikasi dokumen Lakaran dan menyediakan cara yang lebih mudah untuk anda gunakan "npm install --global skpm" untuk memasang.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah itu lakaran tindak balas

Apl Lakaran Reaksi ialah alat yang menjadikan komponen React kepada Lakaran. Menguruskan aset untuk sistem reka bentuk dalam Sketch adalah kompleks, mudah ralat dan memakan masa. Lakaran boleh skrip, tetapi API kerap berubah. React menyediakan pembalut yang sempurna untuk pembangun JavaScript untuk membina dokumen boleh guna semula dengan cara yang biasa.

React - SketchApp ialah perpustakaan sumber terbuka yang disesuaikan untuk sistem reka bentuk. Ia merapatkan jurang antara reka bentuk dan pembangunan dengan menjadikan elemen React ke dalam Lakaran.

Pustaka sumber terbuka yang menakjubkan ini menyediakan pereka bentuk aliran kerja reka bentuk baharu: reka bentuk dengan kod di bawah rangka kerja hadapan React yang paling popular, dan menjadikannya Lakar dalam masa nyata untuk menyemak reka bentuk. Jika anda memikirkannya dengan teliti, Sketch, yang sangat popular dalam kalangan reka bentuk, menyumbang separuh daripada nama perpustakaan sumber terbuka, tetapi sebenarnya ia hanya memainkan peranan sebagai penyemak imbas. Dokumen reka bentuk yang sebenarnya ditinggalkan menjadi kod.

Pasang

npm install --global skpm

Buat projek berdasarkan templat

skpm create my-app --template=airbnb/react-sketchapp 
cd my-app

Gunakan

Ubah suai src/manifest.json

  "commands": [
    {
      "name": "My App Name: Sketch Components"
      "identifier": "main",
      "script": "./main.js"
    }
  ],
  "menu": {
    "isRoot": true,
    "items": [
      "main"
    ]
  }
  }

untuk mencipta fail perpustakaan Sketch Apa yang ditakrifkan dalam src/manifest.json di sini ialah ./main.js

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, StyleSheet, View } from 'react-sketchapp';
import chroma from 'chroma-js';
import { times } from 'ramda';
const styles = StyleSheet.create({
  container: {
    width: 480,
    height: 480,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
});
const Document = ({ colors, steps }) => {
  const color = chroma.scale(colors);
  return (
    <View style={styles.container}>
      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
        <View
          name={val}
          key={val}
          style={{
            backgroundColor: val,
            margin: 2,
            // prettier-ignore
            height: 96 - (2 * i),
            // prettier-ignore
            width: 96 - (2 * i),
            borderRadius: 2 * i,
          }}
        />
      ))}
    </View>
  );
};
Document.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  steps: PropTypes.number,
};
export default () => {
  render(
    <Document colors={[&#39;#01FFD8&#39;, &#39;#C137E3&#39;, &#39;#8702ED&#39;]} steps={50} />,
    context.document.currentPage(),
  );
};

Pelaksanaan

npm run render

Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci apa itu lakaran tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!