React Native WebView 无法触发 css 和 js 文件答案

【问题标题】：React native WebView can't trigger css and js filesReact Native WebView 无法触发 css 和 js 文件
【发布时间】：2021-11-02 19:20:48
【问题描述】：

我正在尝试使用 webview 嵌套 html5 以响应原生，但似乎我无法触发 css 和 js 文件，我的反应原生 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支持吗？

【问题讨论】：

标签： html css react-native webview react-native-webview

【解决方案1】：

这种方式不适用于 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}}

【讨论】：

这个是一样的，我之前试过，css和js部分触发不了