tabBarIcon中用于导航的自定义图像

Question

这里是要用自定义图像替换的带有导航栏图标的代码。我怎样才能做到这一点？

    function Main() {
    const {globalState, dispatch} = useContext(store);
    return (
        <Tab.Navigator>
            <Tab.Screen
                name="Home"
                component={Home}
                options={{
                    tabBarIcon: ({focused}) => (
                        <Icon
                            name={'home'}
                            style={{
                                fontSize: 24,
                                color: focused ? 'dodgerblue' : 'lightgray',
                            }}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Feed"
                component={Feed}
                options={{
                    tabBarIcon: ({focused}) => (
                        <Icon
                            name={'rss'}
                            style={{
                                fontSize: 24,
                                color: focused ? 'dodgerblue' : 'lightgray',
                            }}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Random"
                component={Random}
                options={{
                    tabBarIcon: ({focused}) => (
                        <Icon
                            name={'alpha-r-circle-outline'}
                            style={{
                                fontSize: 24,
                                color: focused ? 'dodgerblue' : 'lightgray',
                            }}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Chat"
                component={globalState.user ? MessageCenter : Login}
                options={{
                    tabBarIcon: ({focused}) => (
                        <Icon
                            name={'chat'}
                            style={{
                                fontSize: 24,
                                color: focused ? 'dodgerblue' : 'lightgray',
                            }}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Settings"
                component={globalState.user ? Setting : Login}
                options={{
                    tabBarIcon: ({focused}) => (
                        <Icon
                            name={'account'}
                            style={{
                                fontSize: 24,
                                color: focused ? 'dodgerblue' : 'lightgray',
                            }}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}

我尝试过的是我替换了此块：

options={{
   tabBarIcon: ({focused}) => (
        <Icon
            name={'home'}
            style={{
            fontSize: 24,
            color: focused ? 'dodgerblue' : 'lightgray',
            }}
        />
    ),
}}

使用此：

<Image
   source={
       focused
          ? require('../../images/home_active_icon.png')
          : require('../../images/home_inactive_icon.png')
          }
          resizeMode={'contain'}
          style={{
            width: 24,
            height: 24,
          }}
/>

但是它不起作用。请帮忙。

Answer 1

**Follow the my code..**

<Tab.Navigator
        screenOptions={({ route, }) => ({
          tabBarIcon: ({ tintColor, image, focused }) => {

            if (route.name == 'Home') {
              image = focused ? require('../../Images/home_active_icon.png') : require('../../Images/home_inactive_icon.png')
            }

            }
            return (
              <Image
                source={image}
                style={{
                  width: 22, height: 22,
                }}
              />
            )
          }
        })}

        }}>

Answer 2

***Follow the my code..***       
 <Tab.Navigator
            screenOptions={({ route, }) => ({
              tabBarIcon: ({ tintColor, image, focused }) => {

                if (route.name == 'Home') {
                  image = focused ? require('../../Images/home_active_icon.png') : require('../../Images/home_inactive_icon.png')
                }
     if (route.name == 'Test') {
              image = focused ? require('../../Images/test_active_icon.png') : require('../../Images/test_inactive_icon.png')
            }
    if (route.name == 'Notification') {
              image = focused ? require('../../Images/Notification_active_icon.png') : require('../../Images/Notification_inactive_icon.png')
            }
    if (route.name == 'Profile') {
              image = focused ? require('../../Images/Profile_active_icon.png') : require('../../Images/Profile_inactive_icon.png')
            }


                }
                return (
                  <Image
                    source={image}
                    style={{
                      width: 22, height: 22,
                    }}
                  />
                )
              }
            })}

            }}>