2016-07-04 28 views
6

React-nativeアプリでReactの要素を組み合わせることに関して質問があります。 このようなことは可能でしょうか?Reactとネイティブアプリを組み合わせる

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    ListView, 
    Switch, 
    TextInput, 
    AsyncStorage, 
    BackAndroid, 
    Navigator, 
    TouchableOpacity, } from 'react-native'; 

var ReactDOM = require('react-dom'); 
var Barcode = require('react-barcode'); 


class Third extends React.Component { 
    ReactDOM.render(
     <Barcode value="http://github.com/kciter" />, 
     mountNode 
    ); 
}; 

私は反応ネイティブのバーコードジェネレータモジュールを見つけるのが難しいため、これを求めています。助言がありますか?

は、すべての返信をありがとう
堂免

+0

https://www.npmjs.com/package/react-native-barcode –

+0

バーコードdoesnt equal qrとaztecコード –

+0

Ohh、わかりました。あなたは1次元バーコードを探しています –

答えて

8

不可。 Reactネイティブ環境では、実際のDOMではなくネイティブコンポーネントが使用されるため、この環境でReactコンポーネントを使用して1日と呼ぶことはできません。

あなたのベストショットは、ネイティブの選択肢を探すことです。


あなたは理論的は、Webビューを作成するネイティブコンポーネントを作成し、そのビューにその子をレンダリングすることができます。 プライベートReactMultiChild APIを使用する必要があります。実際には、ReactコンポーネントがキャンバスのようにDOM以外のものでレンダリングできるようにするために使用します。

たとえば、react-canvasでも、キャンバスにもmy side projectで自分もしました。それは次のようになります。この例では

<Canvas> 
    <CanvasRect frame={[10, 10, 20, 20]} color="black" /> 
</Canvas> 

CanvasRectは、canvas要素ではなく、実際のDOMにCanvasによってレンダリングされようとしています。

したがって、いくつかのレンダラを一緒に橋渡しすることは可能です。あなたのユースケースでは、React NativeのWebコンポーネントのような橋渡しをして架空の架け橋を作るのは残酷かもしれません。

(編集:それは触れていませんが、私はアプローチはかなり一般的で、ネイティブに反応a post on custom React renderersを書いてきました)あなたは、本質的に必要なもの

1

は、コンポーネントを反応させる反応し、ネイティブコンポーネントからのマッピングであります(実際のDOMオブジェクト)。 React-Native-Webそれだけです。あなたはReactとReact-Nativeのコンポーネントを入れ子にすることができます。

<ScrollView> 
<div>Hello World</div> 
</ScrollView> 

このコードは変換され、実際のDOMを作成します(最も美しいものではありませんが、仕事は行います)。現在、すべてのコンポーネントのマッピングはサポートされていませんが、ほとんどのコンポーネントがサポートされています。

リアクションネイティブウェブは、webpackに大きく依存します。だから、あなたがそれに入る前にwebpackをよく理解していることを確認してください。

関連する問題