ReactNative ReactNavigation自定义抽屉内容-将颜色和大小传递给图标

Question

我参考了一个在线教程，为我的DrawerNavigator创建自定义的DrawerContent。我使用的是ReactNavigation v5。

这是我的最小代码：

import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text  } from 'react-native';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/FontAwesome5';
export default function DrawerContent(props) {
return (
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View>

<DrawerItem 
icon={({color, size}) => (
<Icon 
name="calendar-alt" 
color={color}
size={size}
solid
/>
)}
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>
</View>
</DrawerContentScrollView>
</View>
)
}

以下是我遵循的实际教程：https://github.com/itzpradip/react-navigation-v5-mix/blob/master/screens/DrawerContent.js

我的疑问是，如何设置Icon的color和size。我不明白那句台词中使用的技巧。我的意思是，在那一行中，color和size变量从DrawerItem传递给子Icon元素？如果是，它在哪里定义？如何更改值？

Answer 1

根据文档，可以使用drawerItem 的activeTintColor和inactiveTintColors道具设置颜色

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

所以样本代码应该像

<DrawerItem 
icon={({color, size}) => (
<Icon 
name="calendar-alt" 
color={color}
size={size}
solid
/>
)}
activeTintColor="red"
inactiveTintColor="blue"
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>

根据其硬编码的大小，源代码为24源代码第44行

尽管如此，您仍然可以选择传递所需的大小，或者您可以传递一个自定义的react组件作为将被渲染为图标的图标，您可以使用它来提供自己的样式。