如何使用WebView显示React jsx文件

片田K

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

我尝试了几个小时,但找不到如何将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'}
      />
    );
}
}
吉姆

您需要获取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([])}}
    />
  );
 }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在React JS中缩小.jsx文件

create-react-app中的JSX文件

使用babel编译.jsx文件而不是.js

使用 JSX 文件格式而不是 JS?

如何从Typescript 1.6中的单独文件正确导入React JSX

需要帮助将道具从 React 中的 js 文件传递到 jsx(adobe jsx)文件

使用Typescript时无法从单独的文件导入React JSX

Webpack 不会使用 react 编译 jsx 文件

如何在另一个 Jsx 文件中引用 Jsx 文件?

如何解析 .jsx 文件中的外部 JSON 文件

如何在不导入jsx的情况下在jsx文件中使用配置变量?

JSX 文件的 Vim 语法高亮显示停止工作?

将Recharts.js库导入jsx react文件

React-tools JSX编译嵌套文件夹错误

将Url.Action传递给React JSX文件?

React Hooks:從不同的 .jsx 文件更新 useState 鉤子?

react.jsx 文件的 babel-node 抛出错误

在jsx文件中从@ testing-library / react导入'render'错误

react-router-dom:不路由到任何 jsx 文件

如何将React JSX文件转换为简单的JavaScript文件[离线转换]

如何防止`jsx watch`编译交换文件?

在Sublime Text 3中,如何为JSX文件启用Emmet?

如何引用其他.jsx文件中定义的组件

如何将 JS 变量传递给 JSX 文件

如何将 JSX 文件引用到 HTML 页面

globbing无法与jsx文件一起使用gulp eslint

使用WebView ios显示下载的PDF文件

如何将JSX文件默认设置为在Sublime中突出显示Babel文本

如何在由create-react-app创建的应用程序中使用jsx文件(不运行“ npm run弹出”)?