React Native的導航欄背景色動態設置

在React Native中，可以使用navigationOptions屬性來動態設置導航欄的背景色。以下是一個示例代碼，展示了如何在React Native中使用navigationOptions來動態設置導航欄的背景色：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Home',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#f4511e', // 設置導航欄背景色
            },
            headerTintColor: '#fff', // 設置導航欄文字顏色
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={{
            title: 'Details',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#4caf50', // 設置導航欄背景色
            },
            headerTintColor: '#fff', // 設置導航欄文字顏色
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

在上面的示例代碼中，我們使用了navigationOptions屬性來設置每個Stack.Screen的導航欄樣式。其中，headerStyle屬性用于設置導航欄的背景色，可以使用十六進制顏色代碼或RGB顏色值來指定背景色。

需要注意的是，如果你使用的是React Navigation v5或更高版本，則需要使用headerStyle屬性來設置導航欄的背景色，而不是backgroundColor屬性。