Реагировать на родную - не могу очистить время - PullRequest
Новая
       35

Реагировать на родную - не могу очистить время

0 голосов
/ 29 сентября 2019

Я застрял с этой проблемой в течение нескольких часов, и это выглядит следующим образом: я хочу установить тайм-аут, когда пользователь переходит от одной страницы к другой в веб-просмотре, так что если загрузка страницы занимает большенесколько секунд до загрузки я показываю сообщение об ошибке, иначе я сбрасываю таймаут и пользователь продолжает работу на текущей странице.

Я установил таймер как глобальную переменную, но я не знаю, почему он неочистить его, он продолжает выполнять функцию 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```

1 Ответ

0 голосов
/ 29 сентября 2019

Я не вижу, где определено «глобальное», не уверен, является ли это частью самого реагирования или одной из включенных библиотек.я бы ожидал ReferenceError здесь, но так как он реагирует на родную и не реагирует, может быть ошибки в этом случае автоматически восстанавливаются.Я ожидал бы, что это потерпит крах.

Таким образом, вы можете объявить переменную таймера вне класса, чтобы увидеть, действительно ли это проблема с областью видимости, или даже просто использовать this.timer или что-то еще и сделать его полем класса.

...