在 Android 上的 React Native 中出现后退按钮时自定义标题图像移动

Question

我正在尝试自定义我的应用程序页眉以具有居中的徽标图像和右对齐的邮件图像。当用户导航到另一个页面时，我一直在努力处理这些图像移动，然后该页面有一个后退按钮。我最近想出了一个在 iOS 上完美运行但在 Android 上完全失败的解决方案。在 Android 上，居中图像出现在最左侧，并在出现后退按钮时移动。有人可以帮我解决这个问题吗？

这是我的 app_container.styles.js

import { StyleSheet } from "react-native";

const appContainerStyles = StyleSheet.create({
  headerViewMainView: {
    position: "absolute",
    left: 0,
    right: 0,
    flexDirection: "row",
    height: 30,
  },
  pageLogoView: {
    position: "absolute",
    left: 0,
    right: 0,
    alignItems: "center",
  },
  pageLogoImage: {
    width: 80,
    height: 30,
  },
});

export default appContainerStyles;

和 AppContainer.js

import React from "react";
import { Image, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Ionicons from "react-native-vector-icons/Ionicons";
import Results from "../screens/Results/results";
import Surveys from "../screens/Survey/survey";
import appContainerStyles from "./app_container.styles";
import Epc from "../screens/EPC/epc";
import Index from "../screens/Index";
import { Dimensions } from "react-native";

const ScreenWidth = Dimensions.get("window").width;

const Tab = createBottomTabNavigator();

const fixedOptions = {
  title: "",
  headerShown: true,
  headerStyle: {
    backgroundColor: "#FFD900",
  },
  headerTitle: (
    props
  ) => headerView(),
  headerTitleStyle: { flex: 1, textAlign: "center" },
};

const headerView = () => {
  return (
    <View style={appContainerStyles.headerViewMainView}>
      <View style={appContainerStyles.pageLogoView}>
        <Image
          style={appContainerStyles.pageLogoImage}
          source={require("../../assets/logo.png")}
          resizeMode="contain"
        />
      </View>
      <View
        style={{
          position: "absolute",
          left: ScreenWidth / 2 - 60,
        }}
      >
        <Image source={require("../../assets/mail.png")} resizeMode="contain" />
      </View>
    </View>
  );
};

const AppContainer = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: true,
        headerStyle: {
          backgroundColor: "#FFD900",
        },
        headerTitle: (
          props 
        ) => headerView(),
        headerTitleStyle: { flex: 1, textAlign: "center" },
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === "Home") {
            iconName = "home-outline";
          } else if (route.name === "MyPage") {
            iconName = "logo-amplify";
          } else if (route.name === "Profile") {
            iconName = "person-outline";
          } else if (route.name === "Help") {
            iconName = "help-circle-outline";
          } else if (route.name === "More") {
            iconName = "menu-outline";
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "blue",
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen
        name={"Home"}
        component={SurveyStack}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name={"MyPage"}
        component={Surveys}
        options={{
          title: "MyPage",
        }}
      />
      <Tab.Screen
        name={"Profile"}
        component={Results}
        options={{
          title: "Profile",
        }}
      />
      <Tab.Screen
        name={"Help"}
        component={Epc}
        options={{
          title: "Help",
        }}
      />
      <Tab.Screen
        name={"More"}
        component={SurveyStack}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
};

const Stack = createNativeStackNavigator();

const SurveyStack = () => {
  return (
    <Stack.Navigator screenOptions={fixedOptions}>
      <Stack.Screen name={"Index"} component={Index} />
      <Stack.Screen name={"Survey"} component={Surveys} />
      <Stack.Screen name={"Results"} component={Results} />
      <Stack.Screen name={"Epc"} component={Epc} />
    </Stack.Navigator>
  );
};

export default AppContainer;