Question

我知道这是一个广泛的问题，但我无法在反应原生中掌握正确的方法。

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

问题是，当用户选择通过扫描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访问调度，导航和路线。

Answer 1

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

我通过实现代码本身同步执行来解决了这个问题。由于this.setState是异步的，因此在您实际导航之前屏幕不会刷新，并且没有给出视觉提示。

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

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

在导航

1 个答案: