Question

所以我试图在没有导航道具的情况下进行导航。使用React-navigation库进行react-native。我一直在关注https://medium.com/@mattehr/react-navigation-easily-navigate-from-anywhere-in-your-app-7919bde4e42a和https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

但是，当我尝试使用导航时，即使设置了TypeError: TypeError: Cannot read property 'dispatch' of undefined，也会遇到错误setContainer

NavigationService.js

    import { NavigationActions, DrawerActions } from 'react-navigation'
    import type { NavigationParams, NavigationRoute } from 'react-navigation'

    let _container // eslint-disable-line

    function setContainer(container: Object) {
      _container = container
    }

    function reset(routeName: string, params?: NavigationParams) {
      _container.dispatch(
        NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({
              type: 'Navigation/NAVIGATE',
              routeName,
              params
            })
          ]
        })
      )
    }

    function navigate(routeName: string, params?: NavigationParams) {
      _container.dispatch(
        NavigationActions.navigate({
          type: 'Navigation/NAVIGATE',
          routeName,
          params
        })
      )
    }

    function toggleDrawer() {
      _container.dispatch(DrawerActions.toggleDrawer())
    }

    function navigateDeep(actions: { routeName: string, params?: NavigationParams }[]) {
      _container.dispatch(
        actions.reduceRight(
          (prevAction, action): any =>
            NavigationActions.navigate({
              type: 'Navigation/NAVIGATE',
              routeName: action.routeName,
              params: action.params,
              action: prevAction
            }),
          undefined
        )
      )
    }

    function getCurrentRoute(): NavigationRoute | null {
      if (!_container || !_container.state.nav) {
        return null
      }

      return _container.state.nav.routes[_container.state.nav.index] || null
    }

    export default {
      setContainer,
      navigateDeep,
      navigate,
      toggleDrawer,
      reset,
      getCurrentRoute
    }

index.js

    render() {
      StatusBar.setBarStyle('light-content', true)
      return (
        <Provider store={this.store}>
          <App
            ref={container => {
              NavigationService.setContainer(container)
            }}
          />
        </Provider>
      )
    }

action.js

    import navigator from 'navigators/service'
    import { db, auth } from 'utils/firebase'

    import { ROUTE_HOME, ROUTE_LOGIN } from 'constants/routes'

    export const checkUser = () => dispatch => {
      auth.onAuthStateChanged(user => {
        if (user) {
          navigator.navigate(ROUTE_HOME)
        } else {
          navigator.navigate(ROUTE_LOGIN)
        }
      })
    }

无需将我的所有代码粘贴到此线程中。我的应用程序使用switchNavigator，这取决于我是否登录而使我进入登录屏幕或主屏幕。例如

    const RootNavigator = createSwitchNavigator(
      {
        AuthCheck: Authorize,
        Authorized: MainStack,
        Unauthorized: AuthStack
      },
      {
        initialRouteName: 'AuthCheck'
      }
    )

我在AuthCheck内部：

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import { ActivityIndicator, View } from 'react-native'
    import styles from './styles'

    class Authorize extends Component {
      componentDidMount() {
        // check and fetch user
        const { checkUser } = this.props
        checkUser()
      }

      render() {
        return (
          <View style={styles.container}>
            <ActivityIndicator />
          </View>
        )
      }
    }

    Authorize.propTypes = {
      checkUser: PropTypes.func.isRequired
    }

    export default Authorize

在AuthCheck中运行checkUser()时，我得到TypeError: TypeError: Cannot read property 'dispatch' of undefined不确定如何解决此问题。似乎_container是未定义的，即使在我设置导航器即时调用之前也是如此：

    <App
      ref={container => {
        NavigationService.setContainer(container)
      }}
    />

希望我对此解释得足够好，将不胜感激。

在没有导航道具的情况下进行导航导航

0 个答案: