React Native自定义侧边栏中的activeBackgroundColor/activeTintColor

Question

我正在把自定义侧边栏嵌入到DrawerNavigator中。我试图为选定的菜单设置活动色和活动背景色。

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

- Gourav Kumar

---

代码看起来没问题，你有什么问题吗？ - Kraylog

这只有在我不使用自定义侧边栏调用时才有效，但是在这里我正在调用自定义侧边栏。 - Gourav Kumar

@GouravKumar，我也遇到了同样的问题，你是如何解决的？ - zephyr

我通过自定义条件对每个菜单进行了操作，这是侧边栏代码 https://file.io/9SUTPj - Gourav Kumar

@GouravKumar，链接已损坏... - zephyr

从这里获取 https://www.dropbox.com/s/i7opsrbwgz4wsgt/index.js?dl=0 - Gourav Kumar

Answer 1

1）将props传递给侧边栏。

2）使用props.navigation.state.routes[props.navigation.state.index].routeName来检测当前路由在侧边栏中应用相应的样式。

- Tanvir Rahman

Answer 2

你应该将 props 传递给你的组件，并从 props 中提取 'activeTintColor' 和 'activeBackgroundColor'。

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

在 SideDrawer 中

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

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

- Ajith Pandian

---

这个能用，但是它适用于所有菜单，而不是选定的菜单（活动屏幕）。 - Gourav Kumar

这里我上传了一个文件，链接为https://expirebox.com/download/de67b2f07b717c38c3b8eb16346fea16.html。 - Gourav Kumar

Answer 3

我相信您可以在自定义的contentComponent中更改背景色。在SideDrawer jsx中，有带有背景颜色的父View。

- Rigorous implementation

Answer 4

这是我解决动态渲染背景颜色的方案。它不是最好的，因为存在代码重复，但它可以工作。

<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> 

- Jim