我看不到对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] 删除。
我来说两句