React Native+AWS Amplify：Provider包裹index.ts与登出跳转问题求助

1. 用Redux Provider包裹应用入口（index.ts） #

你需要在入口处创建一个被Provider包裹的根组件，替换原有的App注册项，实现全局状态的注入：

修改后的index.ts代码：

import {AppRegistry} from 'react-native';
import 'react-native-gesture-handler';
import App from './App';
import {name as appName} from './app.json';
// 导入Provider和你的store实例
import { Provider } from 'react-redux';
import store from './path/to/your/store'; // 替换为你的store实际路径

// 创建被Provider包裹的根组件
const WrappedApp = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

// 注册包裹后的组件
AppRegistry.registerComponent(appName, () => WrappedApp);

完成后，整个应用的所有组件都能访问到Redux store中的状态。

2. 实现登出后自动跳转登录页 #

问题分析 #

当前导航结构存在冗余（AuthStack中嵌套了DrawerNavigation），且登出时仅清除状态但未正确触发导航栈重置，导致页面无法自动切换。

解决方案步骤： #

步骤1：简化导航结构

移除AuthStackNavigator中的afterLogin页面，因为App.tsx已经根据auth状态切换导航，无需在Auth栈中嵌套Drawer：

function AuthStackNavigator() {
  return (
    <AuthStackNavigation.Navigator>
      <AuthStackNavigation.Screen
        name={'Login'}
        options={{headerShown: false}}
        component={LoginScreen}></AuthStackNavigation.Screen>
      <AuthStackNavigation.Screen
        name={'Otp'}
        options={{headerShown: false}}
        component={OtpScreen}></AuthStackNavigation.Screen>
      // 移除afterLogin页面
    </AuthStackNavigation.Navigator>
  );
}

步骤2：确保App.tsx实时响应auth状态变化

从Redux store中获取auth状态，保证状态更新时自动触发组件重新渲染：

import { useSelector } from 'react-redux';

const App = () => {
  // 从Redux中读取auth状态，路径根据你的store结构调整
  const auth = useSelector(state => state.auth.isAuthenticated);

  return (
    {/* 注意：如果已经在index.ts中用Provider包裹了App，这里要删除重复的Provider */}
    <NavigationContainer theme={getTheme() as ExtendedTheme}>
      {auth ? (
        <DrawerNavigation></DrawerNavigation>
      ) : (
        <AuthStackNavigation></AuthStackNavigation>
      )}
    </NavigationContainer>
  );
};

步骤3：完善登出逻辑

在登出操作中，先调用AWS Amplify的登出方法，更新Redux状态，最后重置导航栈到登录页：

import { Auth } from 'aws-amplify';
import { useDispatch, useNavigation } from '@react-navigation/native';
import { setAuthState } from './path/to/your/authSlice'; // 替换为你的auth action路径

const LogoutButton = () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();

  const handleLogout = async () => {
    try {
      // 调用Amplify官方登出方法
      await Auth.signOut();
      // 更新Redux中的auth状态为未认证
      dispatch(setAuthState(false));
      // 重置导航栈到登录页，防止用户通过返回键回到之前的页面
      navigation.reset({
        index: 0,
        routes: [{ name: 'Login' }],
      });
    } catch (error) {
      console.error('登出失败:', error);
    }
  };

  return <Button title="登出" onPress={handleLogout} />;
};

关键说明 #

• 使用navigation.reset而非navigate，可以彻底清除原有导航栈，避免用户返回登录前的页面。
• 确保Redux的auth状态更新是同步的（或使用正确的异步action），保证状态变化能立即触发App.tsx的重新渲染。

内容的提问来源于stack exchange，提问作者Pooja Damahe