如果它不是组件，是否可以将状态从我的减速器获取到我的导航中，

Question

我正在使用不同的导航格式，但我想在人们在选项卡中添加项目时显示来自州的数字

标签栏徽章：'allows a string'；

但我需要商店的状态，但我不知道如何以这种格式访问它。

想知道这是否可能以及如何实现？我可以调用 getstate() 吗？或者通过appjs中的组件传递。

import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs'
import LoginScreen from '../screens/LoginScreen';





const WorkoutNavigator = createStackNavigator({
  Search: HomeScreen,
   Workouts: WorkoutList,
   Display: WorkoutListDetailScreen,
   Play: PlayWorkoutScreen,
   Details: WorkoutDetail,
  

},
{
    
    defaultNavigationOptions: {
        headerStyle: {
          backgroundColor: Colors.twentyThree,
        },
        headerTintColor: Colors.accent,
        headerTitleStyle: {
          fontWeight: '100',
        },
      },
    }


);

const WorkoutFavTabNav = createMaterialBottomTabNavigator({
    Search: { screen:  WorkoutNavigator, navigationOptions: {
      tabBarIcon: (tabInfo) =>{
      return  <Ionicons name="search" size={25} color={tabInfo.tintColor}/>

      }
    }},
     Workout:{ screen:  FavoritesScreen, navigationOptions: {
      tabBarIcon: (tabInfo) =>{
      return   <Ionicons name="albums" size={25} color={tabInfo.tintColor}/>
              
      

      },
      tabBarBadge: 'I allow a string';
       }},
   

},{
     activeColor: Colors.accent,
   inactiveColor: Colors.primary,
   
    barStyle:{
      backgroundColor:'rgba(0, 0, 0, 0.71)'
    }



  
 
});


export default createAppContainer(WorkoutFavTabNav);

Answer 1

我们可以修改 tabBarIcon.

而不是使用 tabBarBadge

function TabBarIcon({ value, tabInfo }) {
  return (
    <View style={styles.container}>
      <Text style={styles.badge}>{value}</Text>
      <Ionicons name="search" size={25} color={tabInfo.tintColor} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "relative",
    width: "fit-content",
    padding: 12,
  },
  badge: {
    fontSize: 12,
    fontWeight: "bold",
    position: "absolute",
    top: 0,
    right: -10,
  },
});


const TabBarIconContainer = connect(state => ({ value: state.count }))(TabBarIcon);

在导航配置中：

Workout: {
        screen: FavoritesScreen,
        navigationOptions: {
            tabBarIcon: (tabInfo) => {
                return <TabBarIconContainer tabInfo={tabInfo} />
            },
        },
}

如果它不是组件，是否可以将状态从我的减速器获取到我的导航中，

Is it possible to get the state from my reducer into my navigation if its not a component,

navigation

reactjs

react-native-tabnavigator