React 原生 WebView 无法触发 css 和 js 文件

我试图通过使用webview来嵌套html5来react native，但似乎我无法触发css和js文件，我的react native js代码:

import React from 'react';
import { View, StyleSheet  } from 'react-native';
import { WebView } from 'react-native-webview';

export default Game = () =>  {

return (
<WebView
originWhitelist={['*']}
source={require('./index.html')}
style={styles.container}
/>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 300,
paddingTop: 500,
},
});

我的HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css"> 
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>        
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p><a href="https://github.com/arnisritins/15-Puzzle">View source code on GitHub</a></p>
<script src="./15-puzzle.js"></script>

我只是不能触发html中的css和js代码，webview支持吗?

这种方式不适用于WebView。你必须像这样为HTML内容创建一个文件或字符串:例如，创建文件rawHTML:

export const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>15 Puzzle</title>
<link rel="stylesheet" href="./15-puzzle.css"> 
</head>
<body>
<div id="puzzle"></div>
<div id="controls">
<button id="solve">Solve</button>        
<button id="scramble">Scramble</button>
</div>
<p>Developed by Arnis Ritia</p>
<p><a href="https://github.com/arnisritins/15-Puzzle">View source code on GitHub</a></p>
<script src="./15-puzzle.js"></script>
</body>
</head>
`

，然后像这样导入js文件:

import {html} from './rawHTML';

并将WebView源代码更改为source={{html: html}}

相关内容

最新更新

热门标签：