Question

我尝试对我的React Native应用进行身份验证导航，并且我使用启动画面来执行此操作。但是当用户登录时，我将它们发送回启动屏幕，只要他们进行了身份验证，就会将其重定向到应用程序的主屏幕。但是，我得到这个奇怪的错误，它会在进入启动画面之前进入主屏幕，然后出现故障几秒钟。这是我的代码：

AppNavigation：

  const PrimaryNav = StackNavigator({
  SplashScreen: { screen: SplashScreen },
  RegistrationScreen: { screen: RegistrationScreen },
  LoginScreen: { screen: LoginScreen },
  MainScreen: { screen: MainScreen }
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'SplashScreen'
})

ReduxNavigation：

function ReduxNavigation (props) {
  const { dispatch, nav } = props
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav
  })

  return <PrimaryNav navigation={navigation} />
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

闪屏：

class SplashScreen extends Component {
  componentDidMount () {
    const route = this.props.isLoggedIn ? 'LoggedOutNav' : 'LoggedInNav'
    const action = NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: route })]
    })
    this.props.navigation.dispatch(action)
  }

  render () {
    return (
      <OuterSplashContainer>
        <SplashImage
          source={Images.splashImage}
        />
      </OuterSplashContainer>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    isLoggedIn: () => isLoggedIn(state)
  }
}

export default connect(mapStateToProps, null)(SplashScreen)

然后是LoginScreen的重要部分：

componentWillReceiveProps (newProps) {
    if (newProps.user.token) {
      const { navigation } = this.props
      navigation.navigate('SplashScreen')
    }
  }

Here's an image of what is going wrong.

你知道为什么会发生这种情况吗？

React Navigation Redux身份验证保持堆叠

0 个答案: