React native 如何更改其他选项卡上选项卡栏的整体背景色

我想更改tabbar背景色

我在底部导航上有5个选项卡。 首先，当我触摸主页选项卡时。我想更改Tabbar的背景颜色为“透明” 第二，当我触摸别人（四）标签。我想更改Tabbar的背景颜色为“白色” 我还想通过其他选项卡更改activeTintColor

这是我的代码和屏幕截图（我想做这个屏幕截图）

从“react native”导入{View}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“./HomeStack”导入MyHomeStack；
从“/ProfileStack”导入MyProfileStack；
从“../screens/InformScreen”导入InformScreen；
从“../screens/SearchScreen”导入SearchScreen；
从“../screens/UploadScreen”导入UploadScreen；
从“../components/CustomIcon”导入CustomIcon；
const Tab=createBottomTabNavigator（）；
函数MainTabStack（）{
返回(
(
)
}}
/>
(
),
}}
/>
(
),
}}
侦听器={（{navigation}）=>({
tabPress:event=>{
event.preventDefault（）；
导航。导航（“上传屏幕”）；
},
})}
/>
(
),
}}
/>
(
),
}}
/>
);
}
导出默认MainTabStack；

在选项卡栏选项中，您是否尝试过将背景颜色动态更改为所需的颜色

constructor(props){
    this.tabIndex=0;
} 

<Tab.Navigator
    initialRouteName="Home"
    labelStyle={{ fontSize: 12 }}
    screenOptions={({ route }) => ({
        if (route.name === 'Home') {
          this.tabIndex=4;
        } else if (route.name === 'Settings') {
          this.tabIndex=5;
        }
    })}
    tabBarOptions={{
        style: {
        height: '9%',
        backgroundColor: this.tabIndex==4?"#fff":"transparent",
        //backgroundColor: 'transparent',
        position:'absolute',
        bottom:0,
        elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
    }}>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

构造函数（道具）{
这个.tabIndex=0；
} 
({
如果（route.name==='Home'）{
这个.tabIndex=4；
}else if（route.name==='Settings'）{
这个.tabIndex=5；
}
})}
禁忌选项={{
风格：{
身高：9%，
背景色：this.tabIndex==4？#fff:“透明”，
//背景色：“透明”，
位置：'绝对'，
底部：0，
海拔：0
},
activeTintColor:“#000000”，
showLabel:false，
}}>

谢谢Vijay122！我需要更多的问题。我在哪里可以添加代码？？？找不到变量：tabindex。。。T.THi，这是从屏幕选项派生的。我根据你的情况修改了它。如果不行，请告诉我。Vijay122~我理解你的代码逻辑。但我的代码是函数代码。。。所以我不知道如何添加构造函数（道具）。。。你知道我怎样才能添加代码吗？我加上（{route}）=>。。。但是它有错误T，TOh Vijay122我已经成功申请了！！谢谢你！祝你今天愉快~~~~~

constructor(props){
    this.tabIndex=0;
} 

<Tab.Navigator
    initialRouteName="Home"
    labelStyle={{ fontSize: 12 }}
    screenOptions={({ route }) => ({
        if (route.name === 'Home') {
          this.tabIndex=4;
        } else if (route.name === 'Settings') {
          this.tabIndex=5;
        }
    })}
    tabBarOptions={{
        style: {
        height: '9%',
        backgroundColor: this.tabIndex==4?"#fff":"transparent",
        //backgroundColor: 'transparent',
        position:'absolute',
        bottom:0,
        elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
    }}>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>