react-native - 我在 React-navigation V6 中自定义标题时遇到问题

Question

我正在尝试在 React Navigation v6 中自定义标头，问题是我有两个标头，即默认标头和自定义标头，如下所示：

这是我的堆栈导航代码：

export const HomeNavigation = () => {
  const HomeStack = createNativeStackNavigator<RootStackHomeParamList>();
  return (
    <HomeStack.Navigator headerMode="none" screenOptions={{headerMode :"none"}}>
      <HomeStack.Screen
        options={{
          headerTitle: 'Home',
          headerStyle: styles.header,
          headerTitleStyle: styles.headerTitle,
        }}
        name="HomeScreen"
        component={HomeScreen}
      />
      <HomeStack.Screen
        options={{
          headerTitle: 'Play',
          headerStyle: styles.header,
          headerTitleStyle: styles.headerTitle,
        }}
        name="PlayScreen"
        component={PlayScreen}
      />
    </HomeStack.Navigator>
  );
};

风格 ：

 const styles = StyleSheet.create({
  headerTitle: {
    fontWeight: '600',
    color: colors.white,
    fontSize: 16,
  },
  header: {
    backgroundColor: colors.secondary,
  },
  tabBarIcon: {
    marginBottom: -3,
  },
});

我发现在旧版本中使用headerMode : "none"将解决这个问题，所以我尝试在任何地方添加它，但它并没有解决它，任何线索是什么问题或解决方案？

标签： react-nativereact-native-androidreact-navigationreact-native-ios

Answer 1

尝试这个

 options={({ navigation }: any) => ({
          headerTitle: "Page Title",
          headerTitleStyle: { fontSize: 20 },
          headerTitleAlign: "center",
          headerLeft: () => (
            <Component/>
          ),
          headerRight: () => (
            <Component/>
          ),
         
        })}