Expo Webview 加载本地 HTML 文件

Question

我正在尝试使用expo将HTML文件加载到react-native-webview中。我的目标是将我现有的 React 代码库（构建）转换为移动应用程序。 此示例适用于 Expo Snack。它适用于 Snack 提供的 Android 在线模拟器。但是，当我下载零食（零食右上角的下载按钮 - 只能在按 ctrl+s 后才能单击） - 并在我的虚拟 Android 上本地运行它 - 它只是将文件加载为文本。

有什么区别？？

Answer 1

import { WebView } from "react-native-webview";
import { readAsStringAsync } from "expo-file-system";
import { useAssets } from "expo-asset";

export const MusicSheet = () => {
  const [index, indexLoadingError] = useAssets(
    require("../assets/musicsheetview/index.html")
  );

  const [html, setHtml] = useState("");

  if (index) {
    readAsStringAsync(index[0].localUri).then((data) => {
        setHtml(data);
    });
  }

  return (
    <View style={styles.container}>
      <WebView
        onLoad={() => {}}
        source={{ html }}
        onMessage={(event) => {}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 100,
    display: "flex",
  },
});

Answer 2

不要使用Expo、React Native或者任何与JS相关的东西；这是所有问题的答案，保持原生。

Answer 3

还有另一种方法可以使用 expo asset 来做到这一点：

const [assets, error] = useAssets([require('./../../assets/html/image.html')])
const [renderedOnce, setRenderedOnce] = useState(false)

const updateSource = () => {
    setRenderedOnce(true)
}

return (
    assets !== undefined &&
    error === undefined &&
    assets[0].localUri !== null && (
        <WebView
            originWhitelist={['*']}
            source={renderedOnce ? { uri: assets[0].localUri } : undefined}
            onLoad={updateSource}
        ></WebView>
    )
)

对于 android，由于 wWbug，我们必须使用 onLoad 技巧（参见 https://github.com/react-native-webview/react-native-webview/issues/656#issuecomment-561067913）