Question

使用react-native生成一些pub / priv RSA密钥：

如下所示，我有一个微调器，它根据状态变量有条件地触发。问题是，即使状态已经翻转，主UI线程在它可以执行之前被冻结。我几乎试图让工人在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（）时，函数的执行都将暂停，直到下一个渲染周期开始。这允许应用程序在返回处理列表中的下一个项目之前响应用户输入并呈现动画。

React Native，在后台执行昂贵的任务？

我的黑客

密钥生成的类示例

1 个答案: