使用 React-navigation V5 编辑底部选项卡导航上的中间按钮

Question

我正在尝试使用 react-navigation V5 创建底部选项卡导航，如下图所示。中间的图像尺寸比其他的大。

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>