在导航之间显示微调器（react-native-loading-spinner-overlay）答案

【问题标题】：Show spinner (react-native-loading-spinner-overlay) between navigations在导航之间显示微调器（react-native-loading-spinner-overlay）
【发布时间】：2017-11-19 06:36:48
【问题描述】：

我知道这是一个宽泛的问题，但我无法在 react-native 中掌握正确的处理方式。

以下是我在学习 react-native 时所做的几个假设
我的应用程序是围绕连接到 redux 的 StackNavigator 构建的。导航器中的第一个屏幕是我的登录屏幕。所以这基本上是始终加载的“主”屏幕。用户登录（或已经登录）并被转发到另一个页面。在调度导航时，我可以更新登录页面的状态。我想使用这个逻辑来显示微调器，直到导航完成。

问题是，当用户选择通过扫描 QR 码登录时，会打开一个新屏幕，其中会加载相机视图。这需要几毫秒/秒。我正在尝试找到一种使用react-native-loading-spinner-overlay 显示加载动画的方法。

export class Login extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            spinnerVisible: false,
        };
    }

    render() {
        return <KeyboardAvoidingView
            style={styles.container}
            contentContainerStyle={styles.contentContainerStyle}
            behavior="position"
        >
            <Spinner visible={this.state.spinnerVisible} />
            <Image
                source={images.app.title}
                style={styles.titleImage}
            />
            <View style={styles.columnForm}>
                <Button
                    title="INLOGGEN MET QR CODE"
                    wrapperBorderStyle={styles.titleButton}
                    onPress={this.onScanQRCode.bind(this)}
                    // disabled={true}
                />
                <View style={{flex:0, flexDirection: 'row', marginTop:10, marginBottom:10}}>
                // removed other elements
                <Button
                    title="INLOGGEN"
                    wrapperBorderStyle={styles.titleButton}
                    onPress={() => alert('de nest werkt')} />
            </View>
        </KeyboardAvoidingView>
    }

    onScanQRCode() {
        // UPDATE STATE HERE TO SHOW SPINNER?
        this.setState({spinnerVisible: true});
        this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Camera' }));
    }
}

这可行，但微调器会在渲染相机视图时显示，而不是在用户按下按钮时显示。此外，我不知道如何在渲染相机视图时隐藏微调器，而不是使用setTimeout 在预定义的时间后更改状态。这种方法会让人觉得“hacky”。

实现这种情况的正确方法是什么？我可以通过this.props 访问调度、导航和路线。

【问题讨论】：

标签： javascript react-native react-redux react-navigation

【解决方案1】：

再次回来，肯定比我上次问这个问题时更有信心。

我通过实现代码本身同步执行来解决了这个问题。因为this.setState 是异步的，所以在您真正离开之前屏幕不会刷新，也不会给出视觉提示。

最好的办法是在超时中包装您的导航代码，以便this.setState 实际设置状态并刷新屏幕以显示指示微调器。

onScanQRCode() {
    this.setState({spinnerVisible: true});
    setTimeout(() => {
        this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Camera' }));
    }, 100);
}

【讨论】：