React Native底部条在屏幕聚焦时更改背景颜色

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const HomeScreen = () => <Text>Home</Text>;
const SettingsScreen = () => <Text>Settings</Text>;

const App = () => {
  const [backgroundColor, setBackgroundColor] = useState('#FFFFFF');

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setBackgroundColor('#FF0000'); // 更改背景颜色为红色
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          style: { backgroundColor },
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;