reactjs – 结合React和React-Native

我有一个关于在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

不可能. 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,但这种方法非常普遍.)

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...