React Native: Android导航栏颜色在加载时随机变化

npm install @react-navigation/native

import React, { useEffect } from 'react';
import { StatusBar } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

const NavigationBar = () => {
  const isFocused = useIsFocused();

  useEffect(() => {
    // 在组件加载时随机生成颜色
    const randomColor = generateRandomColor();
    // 设置导航栏颜色
    StatusBar.setBackgroundColor(randomColor);
  }, [isFocused]);

  const generateRandomColor = () => {
    // 生成随机的RGB颜色值
    const red = Math.floor(Math.random() * 256);
    const green = Math.floor(Math.random() * 256);
    const blue = Math.floor(Math.random() * 256);
    return `rgb(${red}, ${green}, ${blue})`;
  };

  return null; // 导航栏组件不需要渲染任何内容，返回null即可
};

export default NavigationBar;

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import NavigationBar from './NavigationBar';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 其他屏幕组件 */}
      </Stack.Navigator>
      <NavigationBar /> {/* 添加导航栏组件 */}
    </NavigationContainer>
  );
};

export default App;