无法更改<DrawerItem>react-native

Question

正如代码中给出的，我已经尝试过了，我想抽屉中显示的“Home”是否会偶然变成白色？

<Drawer.Section style={{backgroundColor:"green"}}>
            <DrawerItem 
              icon={({ color, size }) => (
                <Icon name="home-outline" color={"white"} size={size}/>
              )}
              label="Home"
              color="white" //as this is not working
              onPress={() => {
                props.navigation.navigate("Home");
              }}
            />
    </Drawer.Section>

Answer 1

没有颜色属性，您可以使用以下道具来设置 DrawerItem 的样式

• activeTintColor

  ：项目打开时图标和标签的颜色 活跃。

• inactiveTintColor

  ：项目处于非活动状态时图标和标签的颜色。

• activeBackgroundColor

  ：项目处于活动状态时的背景颜色。

• inactiveBackgroundColor

  ：项目的背景颜色 它处于非活动状态。

• labelStyle

  ：标签文本的样式对象。

• style

  ：包装视图的样式对象。

Answer 2

我们可以使用它更改 Drawer.Section 标题颜色

            <Drawer.Section
              title={
                <Text style={{color: colors.textColor}}>Preferences</Text>
              }>

Answer 3

我找到了一个解决方案，但它并不漂亮：

<DrawerItem 
  icon={ () => ( <Icon name='bike' color='white' size={24} onPress={() => { props.navigation.navigate('Home') }} /> )} 

  label={ () => ( <Text style={{color: 'white', fontSize: 20}}>Start Motor</Text>) }

  onPress={() => { props.navigation.navigate('Home') }}          
/>            

Answer 4

对于 Drawer.Item 您可以使用以下代码。

label={<Text style={{color: '#ffffff'}}>First Item</Text>}

对于 Drawer.Section，您可以使用以下代码。

title={<Text style={{color: '#ffffff'}}> Welcome</Text>}

Answer 5

你可以这样定义主题:

const themePaper =  {
  colors:{
    text: '#fff',
  }
}

然后您可以轻松地将其用于

Drawer.Section

和

Drawer.Item

<Drawer.Section
  theme = {themePaper}
>

和

<Drawer.Item
  theme = {themePaper}
>

Answer 6

您需要在主题内设置 onSurfaceVariant 属性来更改标签颜色

        <Drawer.Item
          theme={{
            colors: {
              onSurfaceVariant: 'red',
            },
          }}
        />

Answer 7

反应原生纸抽屉：

更改抽屉部分标题颜色：

theme={{colors: {onSurfaceVariant: 'red'}}}

更改抽屉项目标签颜色：

theme={{fonts:{ labelLarge: {color: 'red'} } }}