图像作为选项卡导航选项中的自定义图标不起作用 React Native

Question

我在我的 react 本机应用程序中使用选项卡导航。在标签导航中，每个标签都有不同的屏幕，我想使用自定义 svg 图像作为标签的图标。我已经按照以下方式使用了 MaterialCommunityIcons 中的构建，并且工作正常。

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

我想问一下在 options 属性中使用 Image 是否有效？如果不是，为什么会这样，因为显然 Icon 和其他与图标相关的组件在这个道具中工作正常。

Answer 1

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

试试：

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