时间戳

首页 > 解决方案 > 持久补液后记录用户

react-native - 持久补液后记录用户

问题描述

我正在尝试在 Rehydration 后在 react-native 中登录用户。在商店中有数据后，我不确定如何重定向用户。

以下是我在 index.js 文件中设置 PersistGate 的方法：

class AppRedux extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={<SplashScreen />}>
          <App />
        </PersistGate>
      </Provider>
    );
  }
}

AppRegistry.registerComponent(appName, () => AppRedux);

SplashScreen.js：

class SplashScreen extends Component {
  constructor(props) {
    super(props);
    props.navigation.navigate(RouteNames.Home);
  }
  render() {
    return <View style={{ flex: 1, backgroundColor: "green" }}></View>;
  }
}

const mapStateToProps = state => {
  return {
    rehydrated: state.user.rehydrated
  };
};
export default connect(mapStateToProps)(SplashScreen);

这种方法的问题是我无法从启动屏幕导航。我得到导航道具未定义。

标签： react-nativeredux

解决方案

“PersistGate”中的“loading”道具只是一个虚拟组件，用于显示加载程序，直到 Persist Rehydration 。“App”（导航组件）将在 Rehydration 之后加载，您可以在其中接收“导航”道具并可以访问商店。

像官方网站Auth Flow中描述的那样试试这个

创建 AuthLoading 屏幕并从那里设置导航

应用程序.js

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

推荐阅读