Question

我的本机应用程序允许人们无需登录即可使用它，但是某些屏幕要求用户登录才能访问。我正在使用反应导航，当未经身份验证的用户导航到这些屏幕之一时，我想重定向到登录屏幕。

现在，屏幕仅对已注销用户呈现不同的呈现，但理想情况下根本不呈现（只是重定向）：

import { connect } from 'react-redux';

import ProfileScreen from './ProfileScreen';

const mapStateToProps = (state) => {
  const { currentUser } = state;

  return {
    currentUser,
  };
};

export default connect(mapStateToProps)(ProfileScreen);


// ProfileScreen.js
import React from 'react';
import { Text } from 'react-native';

const ProfileScreen = (props) => {
  if (props.currentUser == null) {
    return <Text>You are not logged in</Text>;
  }

  return <Text>Your Profile</Text>;
};

export default ProfileScreen;

放置重定向的适当位置在哪里？我也在使用redux，所以我看到了将其放在容器的componentDidMount或redux链中某个位置的建议。

Answer 1

是的，您应该检查ProfileScreen组件的componentDidUpdate方法，以检测redux存储区中是否有currentUser。

退出用户后，只需将导航状态重置为Login屏幕。在组件的componentDidUpdate中，

componentDidUpdate(prevProps){
   if(!this.props.currentUser){
      const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Login' })],
       });
      this.props.navigation.dispatch(resetAction);
  }
}

这将重置导航状态并导航到Login屏幕。

PS。如果您的Login屏幕位于另一个堆栈中，请在key:null参数中添加属性resetAction。这将重置主应用程序导航器，然后导航到Login屏幕。

重定向到未经身份验证的用户的登录屏幕（react-native，react-navigation，react-redux）

1 个答案: