如何修改React Native UI Kitten汉堡菜单图标颜色与状态栏图标颜色

UI Kitten默认的汉堡菜单由DrawerToggleAction组件实现，有两种常用修改方式：

• 直接使用组件自带的tintColor属性修改，v5及以上版本原生支持该prop：

import { DrawerToggleAction, TopNavigation } from '@ui-kitten/components';
import { useNavigation } from '@react-navigation/native';

const HomeHeader = () => {
  const navigation = useNavigation();
  const renderMenuIcon = () => (
    <DrawerToggleAction 
      tintColor='#27ae60' // 此处替换为你需要的颜色值
      onPress={() => navigation.openDrawer()}
    />
  );

  return (
    <TopNavigation
      title='页面标题'
      accessoryLeft={renderMenuIcon}
    />
  )
}

• 自定义汉堡图标，完全控制样式：
  如果默认的图标不符合需求，可以直接用Icon组件自定义菜单入口，直接传fill属性改颜色即可：

import { Icon, TopNavigation } from '@ui-kitten/components';
import { useNavigation } from '@react-navigation/native';

const HomeHeader = () => {
  const navigation = useNavigation();
  const renderMenuIcon = () => (
    <Icon
      name='menu-outline'
      fill='#e74c3c' // 自定义图标颜色
      style={{ width: 24, height: 24 }}
      onPress={() => navigation.openDrawer()}
    />
  );

  return (
    <TopNavigation
      title='页面标题'
      accessoryLeft={renderMenuIcon}
    />
  )
}

状态栏样式可以直接通过React Native原生的StatusBar组件修改，和UI Kitten框架无冲突：

• 状态栏图标文字为深色：设置barStyle为dark-content，仅支持iOS和安卓6.0及以上版本
• 状态栏图标文字为浅色：设置barStyle为light-content
  示例代码：

import { StatusBar } from 'react-native';

// 可以在全局入口或者单独页面引入配置
<StatusBar 
  barStyle="dark-content" 
  backgroundColor="#ffffff" // 安卓端状态栏背景色
  translucent={false}
/>

如果你的项目适配了UI Kitten的明暗双主题，可以监听主题变化动态修改barStyle的值，亮色主题对应深色图标，暗色主题对应浅色图标即可。

内容的提问来源于stack exchange，提问作者Shanaka Anuradha