如何以编程方式更改标签栏样式？

Question

我想在触发事件更改状态时更改选项卡导航器的背景颜色。

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Tab.Navigator
          screenListeners={({ navigation }) => ({
            state: (e) => {
              // ***** Can I change the backgroundColor programmatically here? *****
            },
          })}
          screenOptions={({ route }) => ({
            tabBarStyle: {
              backgroundColor: '#6792DE',
            },

Answer 1

我找到了解决方案：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Tab.Navigator
          screenListeners={({ navigation }) => ({
            state: (e) => {
              if (e.data.state.index == 3){ //tab index 3 clicked
                navigation.setOptions({
                  tabBarStyle: {
                    backgroundColor: '#f45FFF',
                  }
                })
              }