Сочетание React и React-Native

Question

У меня есть вопрос о объединении элементов 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

Answer 1

Не возможно. React Native environment использует собственные компоненты под капотом, а не фактическую DOM, поэтому вы не можете просто использовать компоненты React в этой среде и называть это днем.

Ваш лучший снимок - это поиск местных альтернатив.

---

Вы можете теоретически создать родной компонент, который будет создавать веб-просмотра и визуализации своих детей в этой точке зрения. Вам нужно будет использовать частныйReactMultiChild API - на самом деле это то, что используют компоненты React для рендеринга на вещах, отличных от DOM, например, на холсте.

Например, react-canvas делает это, я тоже сделал это на my side project, также с холстом. Это выглядит следующим образом:

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

В этом примере CanvasRect собирается быть оказана Canvas на холст элемент, а не фактическое DOM.

Таким образом, это, в любом случае, возможно объединить несколько средств визуализации вместе. Тем не менее, для вашего случая использования, перехода на землю и создания такого моста для веб-компонентов в React Native может быть перебор.

(Edit: Я написал a post on custom React renderers Хотя это не касается Реагировать Native, подход является достаточно общим.).

Answer 2

Что вам нужно, по существу является отображением из реагирующих родного компонента реагировать компоненты (фактический объект DOM). React-Native-Web делает как раз это. Вы можете вложить компоненты React и React-Native.

например.

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

Этот код преобразует и создаст фактический DOM (не самый красивый, но выполнит задание). В настоящее время он не поддерживает отображение всех компонентов, но поддерживает большинство из них.

React-Native-Web сильно зависит от webpack. Поэтому убедитесь, что у вас есть хорошее представление о webpack, прежде чем вы попадете в него.