使用React-navigation V5编辑底部标签导航上的中间按钮

Question

我正在尝试使用react-navigation V5创建一个Bottom标签导航，如下图所示。中间一个图像大小比另一个更大。

Answer 1

您可以从中得到一些想法。我已经使用图像了。您也可以按图标进行操作。 我已经更改了重点，可以对其进行修复。

<Tab.Navigator
                tabBarOptions={{
                    activeTintColor: 'red',
                   // activeBackgroundColor:'#000',
                    //inactiveBackgroundColor:'red',
                    labelStyle: {
                         position: 'absolute',
                         top: constants.vh(35),
                        fontSize:constants.vh(18),
                    }
                }}
            >
                <Tab.Screen name='Home' //bottom tab for Home
                    options={{
                        tabBarIcon: ({ focused }) => {
                            let iconName;
                            iconName = focused ? constants.images.bottomHome : constants.images.bottomHome //for icon or image
                            return (
                                <View>
                                    <Image source={iconName} style={{ width: constants.vw(40), height: constants.vh(25) ,position:'absolute',right:constants.vw(-20),bottom:constants.vh(-5)}} resizeMode="contain" />
                                </View>
                            )
                        }
                    }}
                    component={HomeScreen} />
</Tab.Navigator>