reactjs – 结合React和React-Native

发布时间：2020-12-15 20:42:05 所属栏目：百科来源：网络整理

导读：我有一个关于在React-native app中组合React元素的问题. 这样的事情可能吗？ import React,{ Component } from 'react';import { AppRegistry,StyleSheet,Text,View,Image,ListView,Switch,TextInput,AsyncStorage,BackAndroid,Navigator,TouchableOpacity,}

我有一个关于在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,但这种方法非常普遍.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!