sketch-to-react

待我称王封你为后i 2022-05-18 05:56 192阅读 0赞

# RT #

github: [https://github.com/flipace/sketch-to-react-native/tree/react-strategy][https_github.com_flipace_sketch-to-react-native_tree_react-strategy]  
Sketch App: [https://www.sketchapp.com/][https_www.sketchapp.com]

> 我随手找了个Sketch的mac破解版放在附件里  
> PS: 这个demo我是在mac环境跑的。

## clone ##

`$ git clone https://github.com/flipace/sketch-to-react-native.git`  
`$ cd sketch-to-react-native`  
`$ git checkout -b react-strategy`  
`$ git pull origin react-strategy`

## Prerequisites ##

*    
    
 *  Node 8.5.0+ [https://nodejs.org/en/][https_nodejs.org_en]
 *  Python 3.6.1+ [https://www.python.org/downloads/][https_www.python.org_downloads]
 *  Install TensorFlow [https://www.tensorflow.org/install/][https_www.tensorflow.org_install]

> 注：TensorFlow使用“原生”pip来安装

## Steps to run ##

$ npm install && npm link
    $ npm run build

## Extract the component from Sketch as an SVG ##

![这里写图片描述][70]

![这里写图片描述][70 1]

> 注：sketch文件见附件

## go on run ##

按上图步骤把sketch中选一个组件导出成.svg文件，可以先放到桌面上命名为myFile.svg

$ sketch-to-react-native ~/Desktop/myFile.svg react  # react-native is the default target

转出来的react组件会在output文件夹内

![这里写图片描述][70 2]

## Here’s the generated code ##

import React, { Component } from 'react';
    
    
    
    export default class Main extends Component { 
    
      render() {
        return (
          <div style={
       {
            flex: 1, alignSelf: 'stretch', 
            paddingTop: 20,
            backgroundColor: '#FAFAFA'}}>
            <div style={styles.Rectangle299}>
              <p style={styles.ElPooch}>El Pooch</p>
              <p style={styles.ByAlexNelson}>By Alex Nelson</p>
              <div style={
       {flexDirection: 'row'}}>
                <p style={styles.FREESAMPLE}>FREE SAMPLE</p>
                <p style={styles.REVIEW}>REVIEW</p>
              </div>
            </div>
          </div>
        )
      }
    
    }
    
    const styles = {
      Rectangle299: {
        backgroundColor: '#FAFAFA',
        display: "flex",
        flexDirection: "column"
      },
      ElPooch: {
        backgroundColor: 'transparent',
        fontSize: 48,
        fontWeight: 'normal',
        color: '#757575',
        alignSelf: 'flex-start',
        marginLeft: 209,
        textAlign: 'left',
        display: "flex",
        flexDirection: "column"
      },
      ByAlexNelson: {
        backgroundColor: 'transparent',
        fontSize: 28,
        fontWeight: 'normal',
        color: '#999999',
        alignSelf: 'flex-start',
        marginLeft: 214,
        marginTop: 13,
        textAlign: 'left',
        display: "flex",
        flexDirection: "column"
      },
      FREESAMPLE: {
        backgroundColor: 'transparent',
        fontSize: 28,
        fontWeight: 'normal',
        color: '#444444',
        textAlign: 'left',
        marginLeft: 219,
        display: "flex",
        flexDirection: "column"
      },
      REVIEW: {
        backgroundColor: 'transparent',
        fontSize: 28,
        fontWeight: 'normal',
        color: '#FFAB40',
        textAlign: 'right',
        marginRight: 130,
        display: "flex",
        flexDirection: "column"
      }
    }

因为是基于sketch转react-native的项目fork的，所以看源码可以看出，都是[flex布局][flex]。

## 效果对比 ##

SVG：  
![这里写图片描述][70 3]

react component：

![图片描述][70 4]

可以看出，效果还不太好，看看怎么调教吧！

[https_github.com_flipace_sketch-to-react-native_tree_react-strategy]: https://github.com/flipace/sketch-to-react-native/tree/react-strategy
[https_www.sketchapp.com]: https://www.sketchapp.com/
[https_nodejs.org_en]: https://nodejs.org/en/
[https_www.python.org_downloads]: https://www.python.org/downloads/
[https_www.tensorflow.org_install]: https://www.tensorflow.org/install/
[70]: /images/20220518/7b33df7138104fff9396684d1113ad91.png
[70 1]: /images/20220518/01af1fabbf584672887ad76472685ff4.png
[70 2]: /images/20220518/8a0df2bc4c784cf4b5b6700eac0a3b60.png
[flex]: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
[70 3]: /images/20220518/3860461ad35e4180910aba842d102ac8.png
[70 4]: /images/20220518/3f7048a6a27d4763948c3efb0d32fe3a.png

sketch-to-react

发表评论取消回复

还没有评论，来说两句吧...

相关阅读