Question

我在Web视图中有一个网址，如https://www.nytimes.com/，当前代码可以在初始页面中加载，但是如果在链接中键入点击任何内容，则页面将需要一段时间才能加载，并且网站中没有加载指示器。当我们单击任何链接或页面加载时，是否有任何方法可以在React Native中放置页面加载指示器，特别是如果它是像下一个js那样在服务器端呈现的呢？

这是我的ReactNative代码。

import * as React from 'react';
import {
  View,
  Text,
  Image,
  SafeAreaView,
  ScrollView,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import styles from './styles';
import { WebView } from 'react-native-webview';
// import WelcomeSwiper from '../../components/WelcomeScreen/WelcomeSwiper';

import LoadingIcon from '../../components/Loading/index.js';

const WebView = ({ navigation }) => {


  return (
    <SafeAreaView style={styles.container}>

      <WebView
        javaScriptEnabled={true}
        domStorageEnabled={true}
        renderLoading={LoadingIcon}
        source={{ uri: 'https://www.nytimes.com/ ' }}
        startInLoadingState={true}

      />
    </SafeAreaView>
  );
};

export default WebView;

这是我的加载组件

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


const LoadingIcon = () => {
    return (

        <ActivityIndicator
            color='#009688'
            size='large'
            style={styles.ActivityIndicatorStyle}
        />
    );
}

export default LoadingIcon;


const styles = StyleSheet.create(
    {

        WebViewStyle:
        {
            justifyContent: 'center',
            alignItems: 'center',
            flex: 1,
            marginTop: (Platform.OS) === 'ios' ? 20 : 0
        },

        ActivityIndicatorStyle: {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            alignItems: 'center',
            justifyContent: 'center'

        }
    });

Answer 1

我们可以使用以下两种方法获得结果：

您可以使用onLoadProgress检查该WebView是否正在加载某些东西，此道具为您提供0到1之间的数字，如果页面已完全加载，它将返回数字1更新您的状态并根据它向您显示ActivityIndicator：
您可以使用onLoadStart和onLoadEnd，并更新您的状态并根据它向您显示ActivityIndicator！

有关更多信息，请检查：https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onloadprogress

您还可以使用由WebView包装的ActivityIndicator ，* 不要忘记将此方法在ios版的android系统中有效，将其置于WebView之外

这是适合您的工作代码示例：

import React, {useState} from 'react';
import {View, Text, SafeAreaView, ActivityIndicator} from 'react-native';
import {WebView} from 'react-native-webview';

function WebViewTest() {
  const [isLoadong, setLoading] = useState(false);
  return (
    <SafeAreaView style={{flex: 1}}>
      <WebView
        source={{uri: 'https://www.nytimes.com/'}}
        onLoadStart={(syntheticEvent) => {
          setLoading(true);
        }}
        onLoadEnd={(syntheticEvent) => {
          setLoading(false);
        }} />
        {isLoadong && (
          <View style={{flex: 10, backgroundColor: 'white'}}>
            <ActivityIndicator
              color="#009688"
              size="large"
            //   style={{position: 'absolute', left: 200, top: 300}}
            />
          </View>
        )}
    </SafeAreaView>
  );
}

export default WebViewTest;

我希望对您有帮助

在Webview中的页面导航之间显示加载指示器

1 个答案: