Question

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

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

Answer 1

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

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>
  );
};

Answer 3

1）将道具传递到SideDrawer。

2）使用props.navigation.state.routes[props.navigation.state.index].routeName 在SideDrawer中检测当前路线并相应地应用样式。

Answer 4

这是我必须动态渲染背景色的解决方案。由于代码重复，它不是最好的方法，但是它有效

extra = ''  # No oops message the first time
for _ in range(guess_limit):  # Don't even name guess_count, we never use it; by convention, _ means unused variable
    guess = int(input(extra + "I'm thinking of a number between 1 and 10... "))
    extra = "Oops, try again.\n"  # From now on, oops incorporated into prompt

为自定义侧边栏生成本机activeBackgroundColor / activeTintColor

4 个答案: