Реагировать Навигация Навигация без навигационной опоры - PullRequest
0 голосов
/ 24 декабря 2018

Итак, я пытаюсь ориентироваться без навигационной опоры.Использование React-навигационной библиотеки дляact-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

Когда checkUser() запускается в AuthCheck Я получаю TypeError: TypeError: Cannot read property 'dispatch' of undefined не уверен, как это исправить.Похоже, что _container не определен, хотя до того, как я настроил навигаторы, я звоню:

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

Надеюсь, я объяснил это достаточно хорошо, любая помощь будет высоко оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...