React native 为自定义侧栏反应本机activeBackgroundColor/activeTintColor

我正在调用自定义侧边栏inside Drumernavigator。我正在尝试为所选菜单设置活动色调和活动背景色

const DrawerStack = DrawerNavigator(
{
    ProfileScreen: { screen: ProfileScreen },
    Home: { screen: DashboardScreen },
}, 
{
    contentOptions: {
      activeTintColor: "#e91e63",
      activeBackgroundColor : 'purple',
    },
    gesturesEnabled: false,
    swipeEnabled: false,
    contentComponent: SideDrawer
});

---

我相信您可以更改自定义contentComponent中的背景色。在SideDrawer jsx中，有一个背景色的父视图。

您应该将

道具传递给您的组件。并从
道具中提取“activeTintColor”和“activeBackgroundColor”

const DrawerStack = DrawerNavigator(
{
   ProfileScreen: { screen: ProfileScreen },
   Home: { screen: DashboardScreen },
}, 
{
 contentOptions: {
   activeTintColor: "#e91e63",
   activeBackgroundColor : 'purple',
 },
 gesturesEnabled: false,
 swipeEnabled: false,
 contentComponent: props => <SideDrawer {...props}/>
});

const DrawerStack=DrawerNavigator(
{
ProfileScreen:{screen:ProfileScreen}，
主页：{screen:DashboardScreen}，
}, 
{
内容选项：{
activeTintColor:#e91e63“，
activeBackgroundColor:'紫色'，
},
手势已启用：错误，
swipeabled:false，
contentComponent:props=>
});

在侧抽屉中

const SideDrawer = props => {
  let { activeTintColor, activeBackgroundColor } = props;

  return ( //your implementation
    <View
      style={{
        backgroundColor: activeBackgroundColor
      }}
    >
      <Text style={{ color: activeTintColor }}>Title</Text>
    </View>
  );
};

const SideDrawer=props=>{
设{activeTintColor，activeBackgroundColor}=props；
return（//您的实现
标题
);
};
1）将道具传递给侧抽屉

2） 使用
props.navigation.state.routes[props.navigation.state.index].routeName
检测SideDrawer中的当前路径并相应地应用样式。
这是我的解决方案，可以动态渲染背景色。这不是最好的，因为代码重复，但它的工作

<SafeAreaView>
<View style={styles.itemContainer}>
    <TouchableOpacity
        style={[styles.item, props.navigation.state.routes[props.navigation.state.index].routeName === 'Inbox'
        ? { backgroundColor: Colors.PRIMARY_GREEN }
        : null ]}
        onPress={() => {props.navigation.navigate('Inbox')}}
    >
        <Image
            source={require('../assets/img/white-inbox.png')}
            style={styles.icon}
            resizeMode={'contain'}
        />
        <Components.BodyText text={'Inbox'} style={styles.itemText} />
    </TouchableOpacity>
</View>
</SafeAreaView> 


{props.navigation.navigate（'Inbox'）}
>
代码看起来不错，您有什么问题吗？只有在不使用自定义侧边栏调用的情况下，这才有效，但这里我调用的是自定义侧边栏调用sidebar@GouravKumar，我也面临着同样的问题，你是如何解决的？我通过自定义条件在每个菜单上解决的，这里是边栏代码@GouravKumar，链接断开…这是工作，但它适用于所有菜单，不到我上传的所选菜单（活动屏幕），