在导航之间显示微调（反应 - 原生加载 - 微调覆盖）

我知道这是一个广泛的问题，但我无法在反应本机中理解事物的正确方式。在导航之间显示微调（反应 - 原生加载 - 微调覆盖）

接下来是我在学习反应本机时做出的一些假设
我的应用程序围绕连接到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以预定义的时间后更改状态。这种方法会觉得“哈克”。

什么是实现此方案的正确方法？我可以通过this.props访问调度，导航和路线。

来源

2017-06-16 DerpyNerd

回来了，绝对比上次我问这个问题更自信。

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

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

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

来源

2017-10-02 12:15:26 DerpyNerd

在导航之间显示微调（反应 - 原生加载 - 微调覆盖）

回答

相关问题