如何在没有 react-native-static-server 或类似内容的情况下在 React Native WebView 中显示本地 html？

Question

In React Native project, I have html document in src directory. (Assuming that it named "./src/green.html").

And In MyScreen, I have a WebView for showing this page.

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

export default MyScreen (props) {
    const source = require('./green.html');
    const webviewSOurce = Image.resolveAssetSource(source);

    return (
        <View style>
            <WebView
                source={webSource}
                originWhitelist={["*"]}
                style={{
                    width:'100%',
                    minHeight:400
            }}/>
        </View>
    )

}

But it shows the content of html file as a plain text, not html.

    
    <div id="main-div">
    <h1>Hello World! I am alive!</h1>
    </div>

I visited https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files , but I can't get a clear image and react-native-http-server causes some issues on my app.

How can I deal it? Is there any alternative ways to show local html page in WebView without react-native-static-server or react-native-http-server?

Answer 1

I am pretty bad at react, but stumbled across this a couple days ago trying to do the same thing. It's kinda long, so i'll just put the url. https://aboutreact.com/load-local-html-file-url-using-react-native-webview/

Answer 2

The original react-native-static-server is probably causing problems because it is long abandoned by its creators, and broken for latest React Native versions. Good news and shameless self-promo, I maintain and further develop its fork — check it out: @dr.pogodin/react-native-static-server .