结合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的条形码生成模块时遇到了困难。有什么建议吗？

谢谢您的回复，
Domen

- user5654873

---

哦，我明白了。你在寻找一维条形码。 - Yury Tarabanko

快速的谷歌搜索解决了这个问题：https://github.com/ideacreation/react-native-barcodescanner - webdeb

这是关于编程的内容，请将其从英语翻译成中文。仅返回已翻译的文本：这仅用于阅读，而不是从扫描的条形码生成。 - user5654873

你想要生成哪种类型的条形码？ - Daniel Basedow

就像 @Gosha 所说，React 和 React Native 是两个不同的环境。在运行 "react-native run-ios" 命令之后，你的代码将会被编译成本地的 IOS。 - Ryszard

Answer 1

不可能。React Native环境使用的是原生组件，而不是实际的DOM，因此您不能简单地在此环境中使用React组件并称之为一天。

您最好寻找本地替代方案。

---

您可以理论上创建一个本地组件，它将创建一个 Web 视图，并在该视图中呈现其子级。您需要使用私有的 ReactMultiChild API - 实际上，这就是 React 组件用于允许在除 DOM 之外的其他内容上进行渲染（如画布）的方式。

例如，react-canvas 就是这样做的，我也在 我的副业项目 上自己实现了它，同样使用了画布。它看起来像这样：

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

在这个例子中，CanvasRect将由Canvas渲染到画布元素上，而不是实际的DOM。

因此，完全可以将多个渲染器桥接在一起。对于您的用例来说，从底层开始并为React Native中的Web组件创建这样的桥可能有些过度设计。

（编辑：我写了一篇关于自定义React渲染器的文章。虽然它没有涉及React Native，但方法是相当通用的。）

- Gosha A

Answer 2

你需要的主要是从React Native组件到React组件（实际DOM对象）的映射。React-Native-Web正是做这件事情的。你可以嵌套React和React Native的组件。

例如：

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

这段代码将转换并创建实际的DOM（虽然不太美观但能完成工作）。目前，它不支持所有组件的映射，但支持大多数组件。

React-Native-Web严重依赖于webpack。因此，在开始之前，请确保您对webpack有很好的了解。

- Minkesh Jain