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

Question

我是 React Native 的新手。我编写了一个登录页面和个人资料页面。

在 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>
)
}

问题是，一旦我点击登录按钮，它就会开始显示活动指示器，但在显示“个人资料”页面之前，它会再次显示“登录”页面几毫秒，这是我不想要的。

对此有任何帮助。我不想像这样设置 setTimeOut 延迟解决方案：

setTimeout(()=>{  this.setState({ authenticating: false }) }, 100)

如果有人可以为此提供代码。这将非常有帮助。

Answer 1

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

  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 });
})

见https://github.com/react-navigation/rfcs/issues/11