2016-07-04 1 views
6

React-native app에 React 요소를 조합하는 것에 관한 질문이 있습니다. 이와 비슷한 것이 가능할 수 있습니까?React와 React-Native 결합하기

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 
    ); 
}; 

나는 네이티브 반응을위한 바코드 생성기 모듈을 찾는 데 어려움이 있기 때문에이 질문을드립니다. 어떤 제안?

는 모든 답변에 감사드립니다
일러스트 Domen

+0

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

+0

바코드는 동일하지 않습니다. qr 및 아즈텍 코드 –

+0

오하이오. 당신은 1 차원 바코드를 찾고 있습니다 –

답변

8

수 없습니다. React 네이티브 환경은 실제 DOM이 아닌 네이티브 구성 요소를 사용하므로이 환경에서 React 구성 요소를 사용하여 하루 만 호출 할 수는 없습니다.

가장 좋은 방법은 기본 대안을 찾는 것입니다.


당신은 이론적으로는 웹 뷰를 생성하는 기본 구성 요소를 만들고 그 뷰에 아이를 렌더링 할 수있다. 전용ReactMultiChild API를 사용해야합니다. 사실, React 구성 요소는 캔버스와 같이 DOM 이외의 객체에 렌더링 할 수 있도록 사용합니다.

예를 들어, react-canvas도 마찬가지입니다. 나는 캔버스와 함께 my side project에 대해서도 그랬습니다. 이 예에서,

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

CanvasRect 캔버스 요소가 아닌 실제 DOM Canvas 상으로 렌더링 될 예정이다 :은 다음과 같다.

그래서 여러 렌더러를 함께 연결할 수 있습니다. 귀하의 유스 케이스의 경우, 원점 복귀 및 React Native의 웹 구성 요소에 대한 브릿지 만들기는 과도한 작업 일 수 있습니다.

(편집 : 내가 쓴 한 a post on custom React renderers가 기본 반응에 접촉하지 않지만, 접근 방식은 매우 일반적이다..)

1

은 당신이 기본적으로 필요로하는 구성 요소가 반응 할 수있는 반응 - 기본 구성 요소에서 매핑 (실제 DOM 객체). React-Native-Web 그냥 그렇게합니다. React와 React-Native의 구성 요소를 중첩 할 수 있습니다.

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

이 코드는 변형되어 실제 DOM을 생성하지만 가장 좋은 것은 아니지만 작업을 수행합니다. 현재 모든 구성 요소에 대한 매핑을 지원하지는 않지만 대부분의 구성 요소를 지원합니다.

React-Native-Web은 webpack에 크게 의존합니다. 따라서 들어가기 전에 webpack에 대해 잘 알고 있어야합니다.