2017-04-26 6 views
1

私はreact-sketchappをテストしていましたが、これまでのところきれいに見えます。 TextViewImageなどのデフォルトのスケッチ要素をレンダリングする以外に、scssでスタイル付けされたHTMLマークアップを含むデフォルトの反応コンポーネントをレンダリングすることは可能でしょうか?レスキュースケッチでスケッチするためのデフォルトのHTMLとCSSをレンダリング

import React from 'react'; 
import { render, Artboard, Text, View } from 'react-sketchapp'; 

const Hello =() => (
    <View 
    name={`Hello View`} 
    > 
    <Text name="Hello Text"> 
     <span>Hello World</span> 
    </Text> 
    </View> 
); 

const Document =() => (
    <Artboard 
    name="Hello Board" 
    > 
    <Hello /> 
    </Artboard> 
); 

export default (context) => { 
    render(<Document />, context.document.currentPage()); 
} 

が、私は次のエラーを取得: Could not find renderer for type 'span' flexToSketchJSON

デフォルトをレンダリングしているコンポーネントが可能スケッチするためのHTML/CSSを含む反応し

は、私は次のHello -componentをレンダリングしようとしましたか?

答えて

1

HTML要素をReact Nativeにレンダリングできない場合と同じように、HTML要素をスケッチにレンダリングすることはできません。

リアクションは抽象コンポーネントのツリーを管理する単なる方法です。これらのコンポーネントをレンダリングする方法は、使用している特定のレンダラーによって定義する必要があります。 react-sketchappはSketch要素にレンダリングするコンポーネントを理解するレンダラーですが、divなどのHTML要素は理解していません。 (そしてReact Nativeには、Reactネイティブコンポーネントをネイティブモバイルビューにレンダリングする方法を知っているレンダラーが含まれています。react-musicはReact Musicコンポーネントをオーディオにレンダリングする方法などを知っているレンダラーです)。

リアクションは、HTML要素やDOMとはまったく関係がありません。 react-domレンダラライブラリは、DOMへのレンダリングの魔法が起こる場所です。 HTML要素をスケッチにレンダリングする場合は、HTML要素をスケッチのファイル形式に変換する方法を知っているリアクションレンダラーを作成する必要があります。

0

可能です。

React-PrimitivesをReact-SketchAppで使用してみてください。 https://github.com/lelandrichardson/react-primitives

これはReact-SketchApp内のいくつかの例です。 https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives

+0

リンクが役立ちますが、ここで関連する部分を書式設定されたコードブロックにコピーする方がよいでしょう。 [誰もが外部のサイトにアクセスすることはできず、リンクは時間の経過とともに壊れる可能性があります。](https://stackoverflow.com/help/how-to-ask) –

関連する問題