Question

我的WebView首先加载，然后按TouchableOpacity。更改背景网页视图后，是否可以执行此操作而无需重新启动网页视图？

import React, {Component} from 'react';
import {View,Text} from 'react-native'

export default class TestScreen extends Component {
render() {
return  (
    <View >
        <TouchableOpacity onPress={/*what is the function that changes the background color of the webview after loading it (but without reloading the Webview)*/}>
         <WebView>
       </TouchableOpacity>

     </View>
  );
}}

Answer 1

否，您不能更改Web视图的背景颜色，但是可以使用其他视图，其背景颜色覆盖在Web视图上。

import React from 'react';
import {View, StyleSheet, WebView, ActivityIndicator} from 'react-native';

export default class YourComponent extends React.PureComponent{

    state = {
        loading: true,
    };

    render() {
        return (
            <View>
                <WebView
                    source={html}
                    onLoadEnd={() => {
                        this.setState({loading: false});
                    }}
                />
                {
                    this.state.loading && (
                        <View style={{
                            ...StyleSheet.absoluteFillObject,
                            backgroundColor: '#000000',  // your color 
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}>
                            <ActivityIndicator />
                        </View>
                    )
                }
            </View>
        )

    }
}

Answer 2

是的。您可以。您实际上可以通过执行以下操作更改Web视图的背景颜色。

在WebView的开始标记中添加样式道具。像这样

 <WebView 
 style={{
 backgroundColor: 'green'
 }}

> 
</WebView>

这会将Web视图的背景设置为绿色。

如何在React Native中更改WebView的背景颜色？

2 个答案: