Question

我无法弄清楚。我的情况是不需要登录的APP，但是有些屏幕却需要。我的想法是创建HOC，它将检查权限并重定向回登录到选定的屏幕。

我使用常规导航功能重定向。当我单击应该将我重定向到禁止屏幕效果的按钮时，就像这样：

我看到了向禁止屏幕的过渡，然后登录屏幕显示为Modal 然后，我被重定向回禁止屏幕。我要实现的是一个很好的解决方案，避免重定向到显示登录屏幕或完成个人资料屏幕的禁止屏幕。

我的HOC

export function MustBeLoginAndCompleteProfile(Comp) {
class NewComp extends React.PureComponent {

    constructor(props){
      super(props);

      if(!props.isAuthenticated){
          setTimeout(()=> {
              props.navigation.navigate({
                  routeName: 'Login'
              })
          },0);

      }
    }

    componentWillReceiveProps (newProps) {
      console.log(newProps);
    }

    render() {
        return <Comp />
    }
}


const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.login.isAuthenticated,
    }
}

return withNavigationFocus(connect(mapStateToProps, null)(NewComp))
}

我的路由器定义。 GameDetails 是禁止的屏幕。

const gameTab = createStackNavigator({
Games: {
    screen: GamesScreen,
    cardStyle: Styles.cardStyle,
    navigationOptions : {
        ...defaultHeaderOptions,
        cardStyle: Styles.cardStyle,
        title: I18n.t('title_scores'),
    },
},
GameDetails: {
    screen: MustBeLoginAndCompleteProfile(GamesDetailsScreen),
    navigationOptions : {
        ...defaultHeaderOptions,
        title: I18n.t('title_score_details'),
    },
},
GamesDetailsPreviewScreen: {
    screen: GamesDetailsPreviewScreen,
    navigationOptions : {
        ...defaultHeaderOptions,
        title: I18n.t('title_score_details'),
    },
}
},{

});

React-Navigation如何从HOC导航/重定向？验证流程

0 个答案: