Итак, я пытаюсь ориентироваться без навигационной опоры.Использование 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)
}}
/>
Надеюсь, я объяснил это достаточно хорошо, любая помощь будет высоко оценена.