首页 > 解决方案 > 如何在 React Native Webview 组件中使用 Reactjs 库

问题描述

所以正如标题所说,我正在尝试在 React Native Webview 中运行 Reactjs 库,但我没有任何运气。

我的网络视图

                   <WebView
                        source={{html: html}}
                        style={{
                            flex: 1,
                            marginLeft: 0,
                            marginRight: 0,
                            marginTop: 21,
                            marginBottom: 21,
                            width: '100%',
                            height: 263
                        }}
                        scrollEnabled={false}
                    />

我的html字符串

const html = `
<!DOCTYPE html>
<html lang="en">

<title>Test React</title>
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>
<div id="root"/>

<script type="text/babel">
    import RadarChart from 'react-svg-radar-chart';
    import 'react-svg-radar-chart/build/css/index.css';

    ReactDOM.render(
      <div>
      <p>hello</p>
      <RadarChart
        captions={${captions}}
        data={${data}}
        size={450}
        />
      </div>,
      document.getElementById('root'));
</script>
</body>
</html>
`;

我在我的 react native 项目中安装了该库,并尝试将组件连接到像${RadarChart}这样的 html 字符串中,但这不起作用,所以我假设没有办法使用 Webview 使用本地库。有没有人有更好的主意?

标签: reactjsreact-nativewebview

解决方案


推荐阅读