Question

我的应用程序使用TabNavigator，我想在其中根据我的Redux商店中的值在其中一个选项卡图标旁边显示徽章。因为我将TabNavigator的routerConfiguration存储在一个单独的文件中，所以我的想法是导入存储，添加一个监听器并在我的配置中使用我想要的值。但是，无论我在哪个模块中尝试第二次导入我的商店，我都会收到导致TabBar未定义的错误（？！）

我试图删除任何不必要的代码，但我根本看不出这里出了什么问题。

我的基本文件结构如下（可读性降低）

.
├── app.js
├── store.js
├── components
│   └── TabIcon.js
└── navigators
    ├── TabBarNavigation.js
    └── TabBarNavigationConfiguration.js

app.js

import React from 'react';
import { AppRegistry } from 'react-native'
import { Provider } from 'react-redux'
import TabBarNavigation from './navigators/TabBarNavigation'

import store from './store'

class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <TabBarNavigation />
      </Provider>
    );
  }
}

AppRegistry.registerComponent('testapp', () => App);

TabBarNavigation

import React from 'react';

// Navigation
import { addNavigationHelpers } from 'react-navigation'
import { TabBar } from './TabBarNavigationConfiguration'

// Redux
import { connect } from 'react-redux'

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

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

export default connect(mapStateToProps)(TabBarNavigation)

TabBarNavigationConfiguration

import React from 'react'
import { TabNavigator } from 'react-navigation'

// Tab-navigators
import GiveFeedbackNavigation from './GiveFeedbackNavigation'
import ViewFeedbackNavigation from './ViewFeedbackNavigation'

import TabIcon from '../components/TabIcon'
//import store from '../store'

store.subscribe(listener)

var newFeedbackCount

listener = () => {
    newFeedbackCount = store.getState().feedback.newFeedbackCount
}

const routeConfiguration = {
    // ...tab 1

    // ...tab 2
    ViewFeedbackNavigation: { 
        screen: ViewFeedbackNavigation,
        navigationOptions: {
            tabBarLabel: 'View Feedback',
            tabBarIcon: ({ tintColor, focused }) => (
                <TabIcon
                    icon={focused ? 'comments' : 'comments-o'}
                    size={24}
                    color={tintColor}
                    count={newFeedbackCount} // value from Redux store
                />
            ),
        },
    },
}


const tabBarConfiguration = {
    //...
}

export const TabBar = TabNavigator( routeConfiguration, tabBarConfiguration )

商品

// Redux
import { createStore } from 'redux'
import reducer from './reducers'

export default createStore(
    reducer,
    undefined, // initial state
    undefined, // middleware
)

我相信并且工作非常直截了当。但是，当我从 TabBarNavigationConfiguration 中取消注释//import store from '../store'时，来自同一文件的export const TabBar将undefined导致后续线路造成严重破坏。

让我更加困惑的是，如果我尝试从任何其他模块导入商店，例如TabIcon，我得到了同样的错误（TabBar未定义）。

除了结合使用TabBarNavigation＆amp; amp;之外，还有什么想法可能导致这种情况以及如何解决这个问题。将TabBarNavigationConfiguration放入单个模块然后使用mapStateToProps读取商店？我想保持文件分开。

对于它的价值，我正在使用： react@16.0.0-alpha.6 react-navigation@1.0.0-beta.9 react-redux@5.0.4

提前致谢。

无法在任何地方再次导入存储，这样做会使TabNavigator未定义

0 个答案: