Question

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

我问这个是因为我无法找到反应原生的条形码生成器模块。有什么建议吗？

感谢所有回复，
Domen

Answer 1

不可能。 React Native环境使用底层的本机组件，而不是实际的DOM，因此您无法在此环境中使用React组件并将其称为一天。

你最好的选择是寻找原生替代品。

您可以理论上创建一个本机组件，该组件将创建一个Web视图，并在该视图中呈现其子视图。您将需要使用私有 ReactMultiChild API - 事实上，这就是React组件用于允许渲染除DOM以外的东西的东西，比如canvas。

例如，react-canvas就是这样做的，我也是在my side project上自己做的，也是用画布做的。它看起来像这样：

<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组件到反应组件（实际DOM对象）的映射。 React-Native-Web就是这么做的。您可以嵌套React和React-Native的组件。

e.g。

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

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

React-Native-Web在很大程度上取决于webpack。因此，在进入webpack之前，请确保您对{{3}}有充分的了解。

结合React和React-Native

2 个答案: