Question

我想为用户在Web视图中从一个页面导航到另一个页面设置超时时间，以便如果加载页面花费的时间超过几秒钟，则会显示错误视图，否则我将清除超时并用户在当前页面上继续。

我将计时器设置为全局变量，但我不知道为什么不清除它，它会继续执行功能errorView()。

这是代码：

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, BackHandler } from 'react-native';
import {WebView, Platform, ActivityIndicator} from 'react-native';
import Geolocation from 'react-native/Libraries/Geolocation/Geolocation.js';

class App extends React.Component {

    constructor() {
        super();
        this.state = {
            visible: true,
            error: false,
            uri: 'http://127.0.0.1/',
            canGoBack: false,
            ref: null,
        };
        global.timer = null;
    }

    showSpinner() {
        this.setState({ visible: true });
    }

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

    errorView() {
        this.setState({ error: true });
        this.hideSpinner();
    }

    reloadView() {
        this.setState({ visible: true });
        this.setState({ error: false });
        this.state.ref.reload();
    }


    onAndroidBackPress = () => {
        if (this.state.canGoBack && this.state.ref) {
            this.state.ref.goBack();
            return true;
        }
        return false;
    }

    componentWillMount() {
        if (Platform.OS === 'android') {
            BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
        }
        timer = null;
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress');
        }
    }

    render() {
        return (

            <View
                style={this.state.visible === true ? styles.stylOld : styles.styleNew}>

                {this.state.error === true ? (
                    <View style={styles.stylOld}>
                        <Text style={styles.failedToLoad}>Failed To Load Page</Text>
                        <TouchableOpacity style={styles.reloadBtn} onPress={() => this.reloadView()}><Text>Reload</Text></TouchableOpacity>
                    </View>
                ) : null}

                {this.state.visible ? (
                    <View>
                        <Text style={styles.loadingText}>Dr. Mosul</Text>
                        <ActivityIndicator
                            color="white"
                            size="large"
                            style={styles.ActivityIndicatorStyle}
                        />
                    </View>
                ) : null}

                <WebView
                ref={(webView) => { this.state.ref = webView; }}
                source={{uri: this.state.uri}}
                style={styles.WebViewStyle}
                javascriptEnabled={true}
                cacheEnabled={true}
                scalesPageToFit={false}
                geolocationEnabled={true}
                onLoadStart={() => {
                    this.showSpinner();
                    global.timer = setTimeout(() => {this.errorView();}, 5000);
                }}
                onLoad={() => {
                    this.hideSpinner();
                    if (global.timer !== undefined && global.timer !== null) {
                        clearTimeout(global.timer);
                    }
                }}
                onError={() => {
                    this.errorView();
                    if (global.timer !== undefined && global.timer !== null) {
                        clearTimeout(global.timer);
                    }
                }}
                onNavigationStateChange={(navState) => {
                    this.state.canGoBack = navState.canGoBack;
                }}
                }
            />
            </View>


        )
    }

}

const styles = StyleSheet.create({
    stylOld: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: '50%',
        backgroundColor: 'rgb(10, 150, 255)'
    },
    styleNew: {
        flex: 1,
    },
    WebViewStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        marginTop: 0,
    },
    loadingText: {
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 50,
        color: 'white'
    },
    ActivityIndicatorStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
    },
    failedToLoad: {
        fontSize: 50,
        color: 'white'
    },
    reloadBtn: {
        backgroundColor: 'red',
    }
});



export default App```

Answer 1

我看不到'global'定义在哪里，不知道这是react本身的一部分还是包含的库之一。我希望在这里有一个ReferenceError，但是由于它是react-native而不是reactjs，因此在这种情况下可能会自动恢复错误。我希望它会崩溃。

因此，您可以在类外部声明timer变量，以查看它是否确实是作用域问题，甚至可以仅使用this.timer或其他内容并将其设为类字段。

反应本机-无法清除超时

1 个答案: