Question

我目前正在关注此article。我目前在TabBarNavigation中遇到错误。根据我的理解，当我导出类时，问题可能出在connect方法上。但是我已将其包含在<Provider store={store}> <TabBarNavigation/> </Provider>中。

这是我收到错误的代码：

import React, { Component } from 'react';

import { addNavigationHelpers } from 'react-navigation';
import { TabBar } from '../navigationConfiguration';
import { connect } from 'react-redux';
import { View } from 'react-native';

const mapStateToProps = (state) => {
    return {
        navigationState: state.tabBar,
    }
}

class TabBarNavigation extends Component {
    render(){
        const { dispatch, navigationState } = this.props
        return (
            <TabBar
                navigation={
                    addNavigationHelpers({
                        dispatch: dispatch,
                        state: navigationState,
                    })
                }
            />
        )
    }
}

export default connect(mapStateToProps)(TabBarNavigation)

这就是错误

TypeError: undefined is not a function (evaluating 'addListener')

This error is located at:
    in withCachedChildNavigation(TabView) (at TabNavigator.js:34)
    in Unknown (at createNavigator.js:13)
    in Navigator (at createNavigationContainer.js:226)
    in NavigationContainer (at TabNavigation.js:18)
    in TabBarNavigation (created by Connect(TabBarNavigation))
    in Connect(TabBarNavigation) (at index.js:15)
    in Provider (at index.js:14)
    in SampleNavigation (at renderApplication.js:35)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
<unknown>
    getChildEventSubscriber.js:60:16
getChildEventSubscriber
    getChildEventSubscriber.js:59:49
<unknown>
    withCachedChildNavigation.js:53:12
_updateNavigationProps
    withCachedChildNavigation.js:45:38
componentWillMount
    withCachedChildNavigation.js:16:34
callComponentWillMount
    NativeModules.js:59:2
mountClassInstance
    NativeModules.js:150:13
updateClassComponent
    ReactNativeRenderer-dev.js:863:3
beginWork
    ReactNativeRenderer-dev.js:1563:9
performUnitOfWork
    ReactNativeRenderer-dev.js:4726:9
workLoop
    ReactNativeRenderer-dev.js:4782:5
invokeGuardedCallback
    react.development.js:1163:12
invokeGuardedCallback
    react.development.js:1246:4
renderRoot
    ReactNativeRenderer-dev.js:4828:6
performWorkOnRoot

performWork
    ReactNativeRenderer-dev.js:5565:21
performSyncWork
    ReactNativeRenderer-dev.js:5546:9
requestWork
    ReactNativeRenderer-dev.js:5457:16
scheduleWorkImpl
    ReactNativeRenderer-dev.js:5265:9
scheduleWork
    ReactNativeRenderer-dev.js:5208:2
scheduleRootUpdate
    ReactNativeRenderer-dev.js:5997:6
updateContainerAtExpirationTime
    ReactNativeRenderer-dev.js:6038:2
updateContainer
    ReactNativeRenderer-dev.js:6063:2
render

renderApplication
    renderApplication.js:58:21
run
    AppRegistry.js:104:10
runApplication
    AppRegistry.js:196:26
__callFunction
    react.development.js:684:1
<unknown>
    react.development.js:377:9
__guardSafe
    react.development.js:633
callFunctionReturnFlushedQueue
    react.development.js:376:9

TabBar组件的代码：

import { TabNavigator } from 'react-navigation';

import TabOneNavigation from '../tabOne/views/TabOneNavigation'
import TabTwoNavigation from '../tabTwo/views/TabTwoNavigation';

const routeConfiguration = {
    TabOneNavigation: { screen: TabOneNavigation },
    TabTwoNavigation: { screen: TabTwoNavigation },
}

const tabBarConfiguration = {
    tabBarOptions: {
        activeTintColor: 'white',
        inactiveTintColor: 'blue',
        activeBackgroundColor: 'blue',
        inactiveBackgroundColor: 'white',
    }
}

我的商店代码：

import { applyMiddleware, combineReducers, createStore, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunkMiddleware from 'redux-thunk';

// Navigation Configs
import { NavigatorTabOne } from './tabOne/navigationConfiguration';
import { NavigatorTabTwo } from './tabTwo/navigationConfiguration';
import { TabBar } from './tabBar/navigationConfiguration';

// Middleware
const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__ });

function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(
      thunkMiddleware, // lets us dispatch() functions
      loggerMiddleware,
    ),
  );
  return createStore(
    combineReducers({
        tabBar: (state, action) => TabBar.router.getStateForAction(action, state),
        tabOne: (state, action) => NavigatorTabOne.router.getStateForAction(action, state),
        tabTwo: (state, action) => NavigatorTabTwo.router.getStateForAction(action, state),
    }), 
    initialState, 
    enhancer
  );
}

export const store = configureStore({})

    export const TabBar = TabNavigator(routeConfiguration, tabBarConfiguration);

我该如何解决这个问题？

Answer 1

redux集成已发生变化。检查以下文件。

https://reactnavigation.org/docs/redux-integration.html

使用Redux错误的TabBar导航

1 个答案: