ReactNative WebView加载HTML适配问题

RN的WebView组件加载H5代码可能会出现一些样式问题,比如图片超出手机屏幕、文本大小样式问题。下面总结了一下,如何在WebView里面加入我们的标签代码以及样式适配。

class WebViewHTML extends Component {
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    componentWillMount() {

    }
    componentDidMount() {
        const injectedJavaScriptCode = `var objs = document.getElementsByTagName('img');for(var i=0;i
                
                    
                
                
                     this.webview = p}
                        source={{ html: HTMLText, baseUrl: '' }}
                        style={{ flex: 1, width: SCREEN_WIDTH }}
                        automaticallyAdjustContentInsets={false}
                        javaScriptEnabled={true}
                        saveFormDataDisabled={true}
                        scalesPageToFit={Platform.OS === 'android' ? false : true}
                        // useWebKit={true}
                        scrollEnabled={false}
                        onMessage={event => {
                            // alert(event.nativeEvent.data);
                        }}
                        contentInset={{ top: 0, left: 0, right: 0, bottom: 0 }}
                        injectedJavaScript={`
                    const meta = document.createElement('meta');
                    meta.setAttribute('content', 'initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width');
                    meta.setAttribute('name', 'viewport');
                    document.getElementsByTagName('head')[0].appendChild(meta);`+`var objs = document.getElementsByTagName('img');for(var i=0;i
                

            
        )
    }
}

const state = (state) => ({
    userInfo: state.userInfo
})
export default connect(state)(WebViewHTML)

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    text: {
        color: '#aab2b1',
        fontSize: 12
    }
})

你可能感兴趣的:(ReactNative WebView加载HTML适配问题)