Как использовать WebView для отображения файла React jsx - PullRequest
Новая
       11

Как использовать WebView для отображения файла React jsx

2 голосов
/ 07 октября 2019

Не вижу поддержки React jsx local file. Как я могу использовать их в 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'}
      />
    );
}
}

1 Ответ

1 голос
/ 07 октября 2019

Вам нужно получить строку HTML. В WEB React вы можете рендерить JSX с помощью ReactDom, но в ReactNative вы не можете этого сделать. Самый простой способ - генерировать HTML-строку в соответствии с вашим jsx и данными. Вы можете положить что-нибудь там. Я покажу вам несколько примеров. 

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([])}}
    />
  );
 }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...