React Native, выполняющий дорогое задание в фоновом режиме?

Question

Возиться с реактивно-нативной генерацией некоторых RSA-ключей pub / priv:

Как вы можете видеть ниже, у меня есть спиннер, который условно срабатывает на основе переменной состояния.Проблема заключается в том, что основной поток пользовательского интерфейса заморожен до того, как он сможет выполняться, даже если состояние перевернулось.Я почти пытался заставить рабочих работать в среде RN, но мне было очень больно.

Какие у меня есть варианты?Я хочу, чтобы загрузчик запускался после нажатия кнопки и во время вычислений, но останавливался после завершения вычислений.

Я также хотел бы удалить эту функцию activateLoader().

Мой хак

activateLoader() {
    this.setState({ visible: !this.state.visible }, () => {
        console.log(this.state.visible);
        setInterval(() => {
            this.generateKeys();
        }, 1000);
    });
}

Пример класса для генерации ключа

class Controls extends Component {

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

    activateLoader() {
        this.setState({ visible: !this.state.visible }, () => {
            console.log(this.state.visible);
            this.generateKeys();
        });
    }

    generateKeys() {
        RSA.generateKeys(4096)
            .then(keys => {
                Toast.show(`Public & Private Keys Have Been\
                 Saved To Device and Encrypted`, Toast.LONG);

                this.setState({
                    visible: !this.state.visible
                });
            });
    }

    render() {
        return (
            <View style={styles.parentViewStyle}>
                <Spinner visible={this.state.visible} textContent={"Generating Key Pairs"} textStyle={{ color: '#000' }} />
                <ControlButton
                    btnLabel="Join Encrypted Room"
                />
                <ControlButton
                    btnLabel="Generate Public/Private Key Pair"
                    onClick={() => this.activateLoader()}
                />
            </View >
        );
    }
}

Answer 1

Потенциальное решение от https://corbt.com/posts/2015/12/22/breaking-up-heavy-processing-in-react-native.html

import nextFrame from 'next-frame';

  async activateLoader() {
    this.setState({ visible: !this.state.visible });
    await nextFrame();
    this.generateKeys();
}

Каждый раз, когда вызывается функция await nextFrame (), выполнение функции приостанавливается до начала следующего цикла рендеринга.Это позволяет приложению реагировать на пользовательский ввод и визуализировать анимацию, прежде чем вернуться к обработке следующего элемента в нашем списке.