react-native - 更改react-native中顶部导航栏的颜色

Question

我是 react 原生新手，正在开发一个登录应用程序。功能完全正常。我想将导航标题的颜色(如图所示)从白色更改为其他颜色。我看了看，但找不到做同样事情的方法。任何人都可以指导我纠正指针以实现相同的目标。

这是我正在使用的 stackNavigation 代码:

const Login = createStackNavigator();
const LoginStack = () => {
  return (
    <Login.Navigator
      initialRouteName="Welcome"
      headerMode="float"
      screenOptions={() => ({
        headerTintColor: AppStyles.colorSet.mainBackgroundColor,
        headerTitleStyle: styles.headerTitleStyle,
        headerRight: () => <View />,  
        cardStyle: { backgroundColor: '#275362', }
      })}
    >
      <Login.Screen name="Login" component={LoginScreen} />
      <Login.Screen
        options={{ headerShown: false }}
        name="Welcome"
        component={WelcomeScreen}
      />
    </Login.Navigator>
  );
};

const styles = StyleSheet.create({
  headerTitleStyle: {
    fontWeight: 'bold',
    textAlign: 'center',
    alignSelf: 'center',
    color: 'red',
    flex: 1,
  },
});

Answer 1

如果您想更改导航器中所有屏幕的标题背景颜色:

<Login.Navigator
  initialRouteName="Welcome"
  headerMode="float"
  screenOptions={{
    headerStyle: {
      backgroundColor: 'blue',
    }
  }}
>

如果您只想更改登录屏幕标题的背景颜色:

<Login.Screen 
  name="Login"
  component={LoginScreen}
  options={{
    headerStyle: {
      backgroundColor: 'red',
    }
  }}
/>