如何使用 WebView 显示 React jsx 文件

Question

我看不到对 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'}
      />
    );
}
}

Answer 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([])}}
    />
  );
 }
}

如何使用 WebView 显示 React jsx 文件

How to use WebView to show React jsx file

webview

jsx

reactjs

react-native