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

Question

我在我的 React Native 应用程序中使用 Tab Navigation。在选项卡导航中，每个选项卡都有不同的屏幕，我想使用自定义 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 prop中使用Image是否有效？如果不是，为什么会这样，因为显然图标和其他图标相关组件在此道具中工作正常。

Answer 1

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

尝试：

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

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

Image as custom icon inside Tab Navigation options not working React Native

reactjs

react-native

react-native-android

react-native-navigation