反应本机中的样式抽屉菜单切换按钮

Question

我正在尝试向切换按钮添加一些背景阴影，并稍微增加尺寸，但我无法找到针对该按钮的正确道具。

这是我的代码。

<Drawer.Navigator screenOptions={(navigation) => ({
        drawerStyle:{width:280},
        drawerItemStyle: {
           borderRadius: 0,
           width: '100%',
           marginVertical: 0,
           marginLeft: 0,
        },
        drawerLabelStyle: {
          fontFamily: 'sans-serif',
          fontWeight:'100'
       },
       drawerActiveTintColor: '#288df9',
       drawerInactiveTintColor: '#444'
      })}>

      ...

      </Drawer.Navigator>

任何有关如何设置切换按钮样式的帮助将不胜感激。

Answer 1

如果你检查这个Drawer的实现，你会发现这个按钮是一个硬编码在里面的图像：https://github.com/react-navigation/react-navigation/blob/b91c9b05ff96727f5fa6ef0bec51b5d7eac06600/packages/drawer/src/views/ DrawerToggleButton.tsx#L37

export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
  const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>();

  return (
    <PlatformPressable
      {...rest}
      accessible
      accessibilityRole="button"
      android_ripple={{ borderless: true }}
      onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
      style={styles.touchable}
      hitSlop={Platform.select({
        ios: undefined,
        default: { top: 16, right: 16, bottom: 16, left: 16 },
      })}
    >
      <Image
        style={[styles.icon, tintColor ? { tintColor } : null]}
        source={require('./assets/toggle-drawer-icon.png')}
        fadeDuration={0}
      />
    </PlatformPressable>
  );
}

我认为你可以做的就是替换

node_modules

中的图像并使用补丁包将其保存为本地存储库中的补丁。

另一种方法是实现自己的 Button 并使用

openDrawer/closeDrawer

方法来控制抽屉。

Answer 2

使用 headerTintColor 选项

<Drawer.Screen
    name="index" // This is the name of the page and must match the url from root
    options={{
        drawerLabel: 'Home',
        title: 'overview',
        headerTintColor: 'white'
        // headerLeft: () => (
    // <View><ThemedText>123</ThemedText></View>
// )
    }}
/>