我可以将createBottomTabNavigator连接到redux存储吗？ （反应本机）

Question

我的App.js看起来像这样

const TabNavigationStack = createBottomTabNavigator(
  {
    Dashboard: {
      screen: Dashboard,
      navigationOptions: {
        tabBarLabel: () => null,
        tabBarIcon: ({ tintColor }) => (
          <Icon style={{ fontSize: 35, color: tintColor }} name='dashboard' type='MaterialIcons' />
        )
      }
    },
    Home: {
      screen: OrderStack,
      navigationOptions: {
        tabBarLabel: () => null,
        tabBarIcon: ({ tintColor }) => (
          <Icon style={{ fontSize: 35, color: tintColor }} name='money' type='FontAwesome' />
        )
      }
    },
    Notification: {
      screen: NotificationStack,
      navigationOptions: {
        tabBarLabel: () => null,
        tabBarIcon: ({ tintColor }) => (

          <IconBadge
            MainElement={

              <Icon style={{ fontSize: 35, color: tintColor }} name='notifications' type='MaterialIcons' />

            }
            IconBadgeStyle={{ zIndex: 1 }}
            BadgeElement={
            <Text style={{ color: '#FFFFFF', fontSize: 10 }}>0</Text>
            
            }
            Hidden={0}
          />

        )
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: () => null,
        tabBarIcon: ({ tintColor }) => (
          <Icon style={{ fontSize: 35, color: tintColor }} name='person' type='Ionicons' />
        )
      }
    },
  }, // router config
  {
    initialRouteName: 'Home',
    order: ['Dashboard', 'Home', 'Notification', 'Profile'],
    gesturesEnabled: false,
    navigationOptions: {
      header: null,
      tabBarVisible: true
    },
    tabBarOptions: {
      activeTintColor: COLOR.PRIMARY_COLOR,
      inactiveTintColor: '#29333D'
    }
  }
)



const CombinedStack = createSwitchNavigator(
  {
    AuthStack: AuthStack,
 
    TabNavigationStack: TabNavigationStack,

  },
  {
    initialRouteName: 'AuthStack'
  }
)


class App extends Component {
  render() {
    return (
      <Root>
        <Provider store={store}>
          <CombinedStack ref={navigationRef => {
            NavigationService.setTopLevelNavigator(navigationRef)
          }
          } />
        </Provider>
      </Root>
    );
  }
}





export default App;

我打算在用户登录时在create navigator中连接道具，我调用一个api，该API指示在redux中连接的徽章的数量。

我已经尝试过

const mapStateToProps =（状态）=>（{ badgeNumber：状态。通知 }）;

const mapDispatchToProps = (dispatch) => ({
  dispatch: dispatch
})



const TabNavigationStack = connect(mapStateToProps)(createBottomTabNavigator)({....

但是我在道具上出错了。

顺便说一句，我正在使用反应导航2

Answer 1

将您的IconBadge组件移到一个单独的javascript文件中，然后将该组件连接到redux商店

const AppIconWithBadge = ({ badgeNumber }) = {
  //...
};

const mapStateToProps = (state) => ({ badgeNumber: state.Notification });
export default connect(mapStateToProps)(AppIconWithBadge);

 tabBarIcon: ({ tintColor }) => (
          <AppIconWithBadge style={{ fontSize: 35, color: tintColor }} 
                            name='person' type='Ionicons' />
        )