结合 React 和 React-Native

Question

我有一个关于在 React-native 应用程序中组合 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 
    );
};

我问这个是因为我找不到用于 react-native 的条形码生成器模块。有什么建议吗？

谢谢大家的回复，
多门

Answer 1

不可能。 React Native 环境在后台使用本机组件，而不是实际的 DOM，因此您不能简单地在此环境中使用 React 组件并收工。

最好的办法是寻找本地替代品。

您可以理论上 创建一个本机组件，该组件将创建一个 Web 视图，并在该视图中呈现其子项。您将需要使用 private ReactMultiChild API — 事实上，这就是 React 组件用来允许在 DOM 以外的事物上呈现的东西，喜欢 canvas。

比如react-canvas does it, I also did it myself on my side project，还有canvas。它看起来像这样：

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

在此示例中，CanvasRect 将由 Canvas 渲染到 canvas 元素上，而不是实际的 DOM。

因此，无论如何都可以将多个渲染器连接在一起。对于您的用例，从头开始并为 React Native 中的 Web 组件创建类似的桥梁可能有点矫枉过正。

（编辑：我写了 a post on custom React renderers。虽然它没有触及 React Native，但该方法非常通用。）

Answer 2

你本质上需要的是从 react-native 组件到 react 组件（实际 DOM 对象）的映射。 React-Native-Web 就是这样做的。可以嵌套React和React-Native的组件。

例如

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

此代码将转换并创建实际的 DOM（不是最漂亮的代码，但可以完成工作）。目前，它不支持所有组件的映射，但支持大多数组件。

React-Native-Web 严重依赖 webpack. So make sure you have a good understanding of webpack 在你进入它之前。

结合 React 和 React-Native

Combining React and React-Native

barcode

reactjs

react-native