首页 > 建站教程 > APP开发,混合APP >  react-native-webview显示html,高度自适应+字体显示正常+字体颜色修改正文

react-native-webview显示html,高度自适应+字体显示正常+字体颜色修改

我爱模板网用react-native的webview回显后台传过来的html时,遇到了三个问题:
1、webview高度不能自适应,必须设置死,可以在html种执行js,获取document的高度,然后通过postmessage,通知页面给webview组件设置高度
2、字体显示非常小,这是因为webview是以PC的形式展示内容,加上viewport以及手机下的缩放设置即可。
3、字体颜色是黑色的,但是app是深色主题的app,导致文字看不清楚,总不能指望后台添加富文本时,把文字都设置成白色吧,只能前端解决。可以给html内容设置一段css,强制将文字都改成白色。

既然上面的三个问题都有解决方案,那么就开始了:

1、先定义高度
const [webviewHeight, setWebviewHeight] = useState(1);
2、设置html富文本高度、文字缩放
const INJECTEDJAVASCRIPT = `
    //这是缩放的
    const meta = document.createElement('meta');
    meta.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, user-scalable=0');
    meta.setAttribute('name', 'viewport');
    document.getElementsByTagName('head')[0].appendChild(meta);
    //高度获取
    //let webHeight = document.body.getBoundingClientRect().height;
    let webHeight = document.body.scrollHeight;
    window.ReactNativeWebView.postMessage(webHeight);
`;
3、写个监听函数,设置webview的高度值
const onMessage = (msg) => {
    setWebviewHeight(parseInt(msg.nativeEvent.data))
}
4、webview的设置,在source中,除了设置html内容content外,还给它加了个强制改样式的css
<WebView
    style={{width: '100%', height: webviewHeight, backgroundColor:'transparent'}}
    javaScriptEnabled={true}
    source={{html: `<style>*{color:#fff !important;}</style>${content}`}}
    injectedJavaScript={INJECTEDJAVASCRIPT}
    scalesPageToFit={false}
    onMessage={onMessage}
/>
至此,完美解决!