react-native webview加载指示器

Question

我试图在webweb中显示加载指示符如下.正在显示加载指示器,但页面加载后会显示白色背景.如果我将startInLoadingState更改为false,则会显示Web内容,但不会显示加载指示符.它正在ios中"反应原生":"0.46.3"

renderLoadingView() {
    return (
        <ActivityIndicator
           animating = {this.state.visible}
           color = '#bc2b78'
           size = "large"
           style = {styles.activityIndicator}
           hidesWhenStopped={true} 
        />
    );

}

<WebView
    source={source} 
    renderLoading={this.renderLoadingView} startInLoadingState={true} />

Answer 1

我喜欢这种方法,它显示了加载Webview上覆盖的活动指示器,因此您不必等到加载整个页面才能开始查看内容.

constructor(props) {
    super(props);
    this.state = { visible: true };
  }

  hideSpinner() {
    this.setState({ visible: false });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <WebView
          onLoad={() => this.hideSpinner()}
          style={{ flex: 1 }}
          source={{ uri: this.props.navigation.state.params.url }}
        />
        {this.state.visible && (
          <ActivityIndicator
            style={{ position: "absolute", top: height / 2, left: width / 2 }}
            size="large"
          />
        )}
      </View>
    );
  }

Answer 2

一种不错的方法是将属性startInLoadingState设置为true，然后将renderLoading设置为返回所需的View。请参见下面的示例。

  displaySpinner() {
    return (
      <View>
        {/* Your spinner code goes here. 
          This one commes from react-native-material-kit library */}
        <SingleColorSpinner />
      </View>
    );
  }

  render() {
    return (
      <WebView
        startInLoadingState={true}
        source={{ uri: this.state.myUri }}
        renderLoading={() => {
          return this.displaySpinner();
        }}
      />
    );
  }

Answer 3

我已经解决了这个问题，经过一些研究，我找到了一个很好的解决方案。

它需要“ react-native-loading-spinner-overlay”

npm install --save react-native-loading-spinner-overlay

index.android.js

import Spinner from 'react-native-loading-spinner-overlay';

const main = 'http://www.myURI.pt';

class MyApp extends Component {
    constructor(props) {
        super(props);
        this.state = { uri: main, visible: true };
    }

    showSpinner() {
        console.log('Show Spinner');
        this.setState({ visible: true });
    }

    hideSpinner() {
        console.log('Hide Spinner');
        this.setState({ visible: false });
    }

    render() {
        return (
            <View>
                <Spinner
                    visible={this.state.visible}
                    textContent={'Loading...'}
                    textStyle={{ color: '#FFF' }}
                />
                <WebView
                    scalesPageToFit
                    source={{ uri: this.state.uri }}
                    onLoadStart={() => (this.showSpinner())}
                    onLoad={() => (this.hideSpinner())}
                />
            </View>
        );
    }
}

我想我没有错过任何一行。

Answer 4

React-Native WebView 现已弃用。
您可以导入react-native-webview并执行以下操作：

    <WebView
    source={{ uri: 'https://reactnative.dev' }}
    startInLoadingState={true}
    renderLoading={() => <Loading />}
    />

Answer 5

将您的函数更改renderLoadingView为以下内容，加载指示器应该按预期工作：

renderLoadingView() {
  return (
    <ActivityIndicator
      color='#bc2b78'
      size='large'
      styles={styles.activityIndicator}
    />
  );
}

因此，本质上，只需animating从hidesWhenStopped您的ActivityIndicator. 希望这可以帮助。