React native ReactNative：仅在导航到新页面完成后才禁用活动指示器

我是个新来的本地人。我已经编写了登录页面和个人资料页面

在Login.js页面上，我有以下状态：

this.state = {
  email: '',
  password: '',
  authenticating: false,
}

输入正确的详细信息后点击登录按钮后，将执行loginUser函数：

loginUser = (email, password) => {
this.setState({ authenticating: true });
try {
  firebase.auth().signInWithEmailAndPassword(email, password)
    .then((user) => {
      this.props.navigation.navigate('Profile');
      this.setState({ authenticating: false });
    });
}
catch (error) {
  console.log(error.toString());
  }
}

下面是我的渲染函数：

renderCurrentState() {
if (this.state.authenticating) {
  return (
    <View>
      <ActivityIndicator size='large' />
    </View>
  )
}

return (
  <View>
    <Input
      placeholder='Enter your Email...'
      label='Email'
      onChangeText={email => this.setState({ email })}
      value={this.state.email}
    />
    <Input
      placeholder='Enter your Password...'
      label='Password'
      secureTextEntry
      onChangeText={password => this.setState({ password })}
      value={this.state.password}
    />
    <Button
      onPress={() => this.loginUser(this.state.email, this.state.password)}
    >Log in</Button>

    <Button
      onPress={() => this.signUpUser(this.state.email, this.state.password)}
    >Sign upp</Button>

  </View>
)
}

---

如果有人能给我一个代码。这将非常有用。

React导航现在具有生命周期挂钩。您可以等待当前屏幕模糊，以便知道过渡已完成

  navigateAsync = (routeName) => {
    const promise = new Promise(resolve => {
      const subscription = this.props.navigation.addListener('didBlur', () => {
        subscription.remove();
        resolve();
      });
    });
    this.props.navigation.navigate(routeName);
    return promise;
  };

然后你就可以打电话了

this.navigateAsync('Profile').then(() => {
  this.setState({ authenticating: false });
})

---

见

谢谢你，塞巴斯蒂安。它正在工作！！你能给我解释一下代码吗。我可以在navigateAsync函数的开头加上“this.props.navigation.navigate（routeName）；”吗？不确定，但您可能可以。这可能更危险，因为在添加侦听器之前，onBlur可能会触发动画。你想让我特别解释什么？好的，谢谢我明白了。

this.navigateAsync('Profile').then(() => {
  this.setState({ authenticating: false });
})