React Native登出后导航未跳转至SignedOut页面问题求助

看起来你遇到的问题是登出操作没有正确同步App组件的登录状态，导致Switch Navigator始终停留在SignedIn路由组，点击登出后又跳回了Dashboard页面。咱们一步步来修复这个问题：

1. 先修复Profile.js里的语法错误 #

你的登出按钮代码存在两处语法问题，会导致逻辑执行异常：

• this.props.dispatch(unauthUser) 后缺少分号，导致代码语法断裂
• 异步回调里的逻辑没有正确用大括号包裹，执行顺序混乱

修正后的按钮代码：

<TouchableOpacity 
  onPress={() => {
    onSignOut()
      .then(() => {
        this.props.dispatch(unauthUser); // 修正语法，添加分号
        // 通知App组件更新登录状态，而非手动跳转
        this.props.screenProps.updateSignedInStatus(false);
      })
      .catch(err => console.error('登出失败:', err))
  }} 
>
  <View style={styles.signOutButton}>
    <Text style={styles.button}>SIGN OUT</Text>
  </View>
</TouchableOpacity>

2. 让App组件能接收登录状态更新 #

你的App组件的signedIn状态只在初始化时读取了一次AsyncStorage，登出后没有主动更新这个状态，导致Switch Navigator一直使用SignedIn的路由配置。我们需要给子页面提供更新状态的方法：

修改App组件代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { signedIn: false, checkedSignIn: false };
    // 绑定状态更新方法，确保this指向正确
    this.updateSignedInStatus = this.updateSignedInStatus.bind(this);
  }

  // 新增状态更新方法
  updateSignedInStatus(isSignedIn) {
    this.setState({ signedIn: isSignedIn });
  }

  async componentWillMount() {
    await isSignedIn()
      .then(res => this.setState({ signedIn: res, checkedSignIn: true}))
      .catch(err => alert("An error occurred"));
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;
    if (!checkedSignIn) {
      return null;
    }
    const Layout = createRootNavigator(signedIn);
    // 通过screenProps把更新方法传递给子路由组件
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          <Layout screenProps={{ updateSignedInStatus: this.updateSignedInStatus }} />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};

3. 优化登出逻辑，确保状态同步 #

当调用onSignOut清除AsyncStorage后，必须同步更新App组件的signedIn状态——这样createRootNavigator会重新渲染以SignedOut为初始路由的导航器，无需手动调用navigation.navigate，App会自动切换到SignedOut页面。

之前的核心问题就是：App组件的signedIn状态没有随登出操作更新，导致导航器始终使用SignedIn的配置，手动跳转后又被初始路由拉回了Dashboard。

总结修复流程 #

• 修正Profile.js里的语法错误，保证异步逻辑正确执行
• 在App组件中添加状态更新方法，并通过screenProps传递给子页面
• 登出成功后调用状态更新方法，让App重新渲染正确的导航器

这样点击一次登出按钮就能直接跳转到SignedOut页面，不会再出现回到Dashboard的问题。

内容的提问来源于stack exchange，提问作者Markus Hayner