ActivityIndicator не работает в React Native

Question

Я работаю с response-native-pu sh -notification . При нажатии кнопки я хочу удалить локальное уведомление, созданное ранее, и я могу сделать это, используя PushNotification.cancelLocalNotifications({id: '123'}). Я хочу отображать индикатор активности при удалении уведомлений, но столкнулся с проблемой.

Вот мой код. Этот метод срабатывает при нажатии кнопки:

import React from 'react';
import {
    View,
    Text,
    Button,
    ActivityIndicator,
} from 'react-native';
import PushNotification from 'react-native-push-notification';

export default class App extends React.Component {

    constructor() {
        super();
        this.state = {
            spinner: false,
        }
    }

    delete = (id) => {
        this.setState({ spinner: true });
        var userid = id;
        var temp = 0;
        //I want to start my activity Indicator here
        for (let i = 0; i < 50; i++) {
            temp = Number(userid) + Number(i);
            PushNotification.cancelLocalNotifications({
                id: temp,
            });
        }
        this.setState({ spinner: false });
        // I want to stop my activity Indicator here
    }

    render() {

        if (this.state.spinner) {

            return (
                <View style={{ flex: 1, justifyContent: 'center' }}>
                    <ActivityIndicator/>
                </View>
            );
        } else {
            return (
                <View>
                    //code snippet
                    <TouchableOpacity onPress={() => this.delete(id)}>
                        <Text>click</Text>
                    </TouchableOpacity>
                </View>);
        }
    }
}

Answer 1

Здесь функция удаления является асинхронной, поэтому for-l oop может запускаться до this.setState({ spinner: true });

или this.setState({ spinner: false }); может запускаться сразу после this.setState({ spinner: true });, в то время как for-l oop продолжает работать.

Вы можете установить свою переменную счетчика в for-l oop:

delete = (id) => {
        var userid = id;
        var temp = 0;
        for (let i = 0; i < 50; i++) {
            if (i == 0) {
                //start indicator here
                this.setState({ spinner: true });
            }
            temp = Number(userid) + Number(i);
            PushNotification.cancelLocalNotifications({
                id: temp,
            });
            if (i == 49) {
                //end indicator here
                this.setState({ spinner: false });
            }
        }
    }

Answer 2

Кажется, что метод cancelLocalNotifications, в свою очередь, просто вызывает метод Native Bridge, а ничего не возвращает .

Это означает, что вы не знаете когда функция завершена.

Я предлагаю имитировать вызов, чтобы казалось, что приложение работает.

Что-то вроде этого должно быть в порядке:

delete = (id) => {
  this.setState({ spinner: true });

  // ...

  // Wait 2 seconds and then hide the spinner
  setTimeout(() => {
    this.setState({ spinner: false });
  }, 2000);
}