将Sketch文件转为RN组件

柳项明
2023-12-01

一、前期准备:
Node 8.5.0+ http://nodejs.cn/download/

Python 3.6.1+ https://www.python.org/downloads/

TensorFlow https://www.tensorflow.org/install/pip#system-install

sketch-to-react-native:https://github.com/nanohop/sketch-to-react-native.git

1、安装 Python:下载最新版本的Python并安装,安装成功验证查看安装版本:

python3 --version
pip3 --version

2、安装 TensorFlow,需要使用 Python 3.6-3.9 和 pip 19.0 及更高版本

安装命令: pip3 install --user --upgrade tensorflow # install in $HOME

验证安装效果:python3 -c “import tensorflow as tf; print(tf.reduce_sum(tf.random.normal([1000, 1000])))”

如果系统返回了张量,则意味着您已成功安装 TensorFlow

3、安装 sketch-to-react-native

安装命令: git clone https://github.com/nanohop/sketch-to-react-native.git

二、初始化:
1、cd sketch-to-react-native

2、安装puppeteer、prerender-spa-plugin,npm i puppeteer prerender-spa-plugin --ignore-scripts

3、npm install && npm link

4、下载Chromium,https://download-chromium.appspot.com/

5、在node_modules/puppeteer目录下新建.local-chromium目录,mkdir .local-chromium

6、把下载好的Chromium压缩包解压到.local-chromium目录

三、使用方法:
1、提取Sketch组件为SVG

2、执行命令: sketch-to-react-native ~/Desktop/myfile.svg,自动生成图片文件和js代码文件

四、参考内容:
1、将Sketch文件转换为React Native组件,https://zhuanlan.zhihu.com/p/30812580,https://github.com/nanohop/sketch-to-react-native
2、TensorFlow安装,https://www.tensorflow.org/install/pip#system-install
3、http://tantai.org/posts/puppeteer-install/

 类似资料: