无法改变 reactjs 中标签的颜色< DrawerItem>

yqhsw0fo 于 2023-03-09 发布在 React

关注(0)|答案(6)|浏览(116)

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

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

react-native

来源：https://stackoverflow.com/questions/63584377/cannot-change-colour-of-label-in-draweritem-react-native

6条答案

按热度按时间

v8wbuo2f1#

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

activeTintColor：项目处于活动状态时图标和标签的颜色。
inactiveTintColor：项目处于非活动状态时图标和标签的颜色。
activeBackgroundColor：项目处于活动状态时的背景颜色。
inactiveBackgroundColor：项目处于非活动状态时的背景颜色。
labelStyle：标签文本的样式对象。
style： Package 器视图的Style对象。

赞(0）回复(0）举报 2023-03-09

vxf3dgd42#

我们可以使用以下命令更改Drawer.Section标题颜色

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

赞(0）回复(0）举报 2023-03-09

n3schb8v3#

我想出了一个解决办法，但不太妙：

<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') }}          
/>

赞(0）回复(0）举报 2023-03-09

k4ymrczo4#

对于抽屉.项目，你可以使用下面的代码.

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

对于Drawer.section，可以使用下面的代码.

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

赞(0）回复(0）举报 2023-03-09

lvmkulzt5#

你可以这样定义主题：

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

然后你就可以很容易地把它用于Drawer.Section和Drawer.Item

<Drawer.Section
  theme = {themePaper}
>

以及

<Drawer.Item
  theme = {themePaper}
>

赞(0）回复(0）举报 2023-03-09

mdfafbf16#

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

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

赞(0）回复(0）举报 2023-03-09

我来回答

无法改变 reactjs 中标签的颜色< DrawerItem>

6条答案

相关问题

热门标签

最新问答