在选项卡导航选项中以自定义图标的形式显示React Native不起作用

Question

我在react本机应用程序中使用Tab导航。在选项卡导航中，每个选项卡都有不同的屏幕，我想使用自定义svg图像作为选项卡的图标。

<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'white',  // Color of tab when pressed
inactiveTintColor: '#ebebf5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
showLabel: true, //No label for Android
labelStyle: {
fontSize: 11,
},
style: {
backgroundColor: 'black', // Makes Android tab bar white instead of standard blue
height: (Platform.OS === 'ios') ? 48 : 50 
}
}}>
<Tab.Screen
name="Chat"
component={LogsScreen}
options={{
tabBarLabel: 'Chat',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="chat"
color={color}
size={size}
/>
),
}} />
</Tab.Navigator>

但当我使用选项道具内的图像标签时，下面的方式并没有显示图像。

<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'white',  // Color of tab when pressed
inactiveTintColor: '#ebebf5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
showLabel: true, //No label for Android
labelStyle: {
fontSize: 11,
},
style: {
backgroundColor: 'black', // Makes Android tab bar white instead of standard blue
height: (Platform.OS === 'ios') ? 48 : 50
}
}}>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Feed',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./Partie.svg')}
style={{ width: 26, height: 26, tintColor: tintColor }}
/>
),
},                      
}} />
</Tab.Navigator>

我想问一下在选项道具中使用图像是否有效？如果不是的话，原因是图标和其他图标相关组件在这个道具中运行良好。

Answer 1

在react导航文档中，我没有看到tabBar的任何选项，尤其是tabBar.icon。有效的选项是tabBarIcon，就像上面的第一段代码一样。你是错误地添加了这个道具还是故意添加的？

尝试：

tabBarIcon: ({ color, size }) => (
<Image
source={require('./Partie.svg')}
style={{ width: 26, height: 26, tintColor: color }}
/>
)