如何使用 WebView 显示 React jsx 文件答案

【问题标题】：How to use WebView to show React jsx file如何使用 WebView 显示 React jsx 文件
【发布时间】：2020-02-04 08:29:08
【问题描述】：

我看不到对 React jsx 本地文件的任何支持。如何在 WebView 中使用它们？有人能帮我吗。我在这种情况下使用这样的： <WebView source={{ uri: isAndroid ? 'file:///android_asset/android_asset/index.jsx' : 'index.jsx' }} allowUniversalAccessFromFileURLs={true} onShouldStartLoadWithRequest={request => { return true }} useWebKit={false} /> 更新

我尝试了几个小时，但找不到将 React 文件导入 Javascript 的方法。这是我的反应文件，如： index.jsx

import * as React from 'react';`
export class TVChartContainer extends React.PureComponent {

    componentDidMount(){ // Do something}
    render(){
    return (
      <div
        id={this.props.containerId}
        className={'TVChartContainer'}
      />
    );
}
}

【问题讨论】：

标签： reactjs react-native webview jsx

【解决方案1】：

您需要获取 HTML 字符串。在 WEB React 中，你可以通过 ReactDom 渲染 JSX，但在 ReactNative 中你不能这样做。最简单的方法是根据您的 jsx 和数据生成 html 字符串。你可以把所有东西都放在那里。我给你举几个例子。

class MyInlineWeb extends Component {

componentDidMount(){ // Do something}

 renderHtmlAndroid = (data) => {
   return `<div>
            <style>
              .block {}
            </style>
            <div class="block">${data}<div>
           <div>`
 }

 renderHtmliOs = (data) => {
   return `<!DOCTYPE html>
           <html>
             <head>
              <title>Title</title>
              <meta charset="UTF-8" />
             </head>
             <body>
              <div id="app">${data}</div>
             </body>
            </html>`
 }

 render() {
     return (
    <WebView
     originWhitelist={['*']}
     source={{html: isAndroid ? this.renderHtmlAndroid([]) : this.renderHtmliOs([])}}
    />
  );
 }
}

【讨论】：

感谢您给我答案。我现在就试试你的解决方案。
@Kakata Kyun 如果你成功了，请检查我的答案；）
我试过了，但我不能正确地做。请用我的更新信息清楚地描述。非常感谢@Jiml