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属性。