[英]Color the react-navigation drawer active icon if using react-native-vector-icons
I have this react-navigation drawer:我有这个反应导航抽屉:
I want to color the active icons green like the labels.我想像标签一样将活动图标涂成绿色。
I'm using react-native-vector-icons for the icons.我正在使用 react-native-vector-icons 作为图标。
code:代码:
const AddMenuIcon = ({ navigate }) => (
<View>
<Icon
name="plus"
size={30}
color="#FFF"
onPress={() => navigate('DrawerOpen')}
/>
</View>
)
const SearchMenuIcon = ({ navigate }) => (
<Icon
name="search"
size={30}
color="#FFF"
onPress={() => navigate('DrawerOpen')}
/>
)
const LoginMenuIcon = ({ navigate }) => (
<Icon
name="user"
size={30}
style={{ fontWeight: '900' }}
color="#FFF"
onPress={() => navigate('DrawerOpen')}
/>
)
const Stack = {
Login: {
screen: Login,
headerMode: 'none'
},
Search: {
screen: Search,
headerMode: 'none'
},
Add: {
screen: Add,
headerMode: 'none'
}
}
const DrawerRoutes = {
Login: {
name: 'Login',
screen: StackNavigator(Stack.Login, {
headerMode: 'none'
}),
headerMode: 'none',
navigationOptions: ({ navigation }) => ({
drawerIcon: LoginMenuIcon(navigation)
})
},
'Search Vegan': {
name: 'Search',
screen: StackNavigator(Stack.Search, {
headerMode: 'none'
}),
headerMode: 'none',
navigationOptions: ({ navigation }) => ({
drawerIcon: SearchMenuIcon(navigation)
})
},
'Add vegan': {
name: 'Add',
screen: StackNavigator(Stack.Add, {
headerMode: 'none'
}),
headerMode: 'none',
navigationOptions: ({ navigation }) => ({
drawerIcon: AddMenuIcon(navigation)
})
}
}
const CustomDrawerContentComponent = props => (
<SafeAreaView style={{ flex: 1, backgroundColor: '#3f3f3f', color: 'white' }}>
<DrawerItems {...props} />
</SafeAreaView>
)
const RootNavigator = StackNavigator(
{
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(DrawerRoutes, {
initialRouteName: 'Login',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
contentOptions: {
activeTintColor: '#27a562',
inactiveTintColor: 'white',
activeBackgroundColor: '#3a3a3a',
}
}),
headerMode: 'none',
initialRouteName: 'Login'
},
initialRouteName: 'Login'
},
{
headerMode: 'none',
initialRouteName: 'Drawer'
}
)
export default RootNavigator
Is there any way at all to colour the active icon the same as the active text if using react-native-vector-icons?如果使用 react-native-vector-icons,有没有办法将活动图标的颜色与活动文本相同?
activeTintColor
doesn't work on the icon. activeTintColor
不适用于图标。 Can we programmatically check if active?我们可以以编程方式检查是否处于活动状态吗? Another strange thing is rgba colours do not work on the
CustomDrawerContentComponent
so I can't make the background semi-transparent which is annoying.另一个奇怪的事情是 rgba 颜色在
CustomDrawerContentComponent
上CustomDrawerContentComponent
所以我不能使背景半透明,这很烦人。 Bonus if you can help there too!如果你也能在那里提供帮助,那就加分吧!
You can dynamically pass the tintColor
prop to your icon component which automatically resolves to the active or inactive tint color:您可以动态地将
tintColor
道具传递给您的图标组件,该组件会自动解析为活动或非活动的色调颜色:
drawerIcon: ({tintColor}) => <MaterialIcons name="home" size={20} color={tintColor} />,
Also, inactive icon containers seem to come with some transparency by default so you might want to set the opacity
to 1:此外,默认情况下,非活动图标容器似乎带有一些透明度,因此您可能希望将
opacity
设置为 1:
<DrawerItems iconContainerStyle={{opacity: 1}} ... />
In react-navigation Version: 5.x在反应导航版本:5.x
use color not tintColor providing-a-custom-drawercontent使用颜色而不是 tintColor 提供自定义抽屉内容
<Drawer.Screen name="settingscreen" component={Settings}
options={{
drawerLabel: "Settings",
drawerIcon: ({ color }) => <MaterialCommunityIcons name="settings" size={24} style={[styles.icon, { color: color }]} />
}}
/>
For version 5.x, you have to use activeTintColor
like following sample.对于 5.x 版,您必须像以下示例一样使用
activeTintColor
。
function App() {
return (
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'blue',
itemStyle: { marginVertical: 8, marginHorizontal: 8 },
}}
>
<Drawer.Screen
name="Home"
component={AppNavigator}
options={{
drawerIcon: ({ color }) => (
<AntDesign name={"calendar"} size={20} color={color} />
),
}}
/>
<Drawer.Screen
name="Completed"
component={CompletedContainer}
hideStatusBar
options={{
drawerIcon: ({ color }) => (
<Entypo name={"list"} size={20} color={color} />
),
}}
/>
<Drawer.Screen
name="Settings"
component={SettingsContainer}
hideStatusBar
options={{
drawerIcon: ({ color }) => (
<Feather name={"settings"} size={20} color={color} />
),
}}
/>
</Drawer.Navigator>
);
}
For me it worked:对我来说它有效:
<Drawer.Screen name="settingscreen" component={Settings}
options={{
drawerLabel: "Settings",
drawerIcon:(({color}) => <AntDesign name="home" size={30} color={color} />) />
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.