React 导航仅在 Android 上显示带有自定义标题的默认标题答案

【问题标题】：React navigation shows default header with custom header only on AndroidReact 导航仅在 Android 上显示带有自定义标题的默认标题
【发布时间】：2021-12-18 19:33:19
【问题描述】：

我在 react native 应用程序上有一个奇怪的错误，我写了一个自定义标题，它与默认标题一起出现。但它不像是 2 个相互重叠的标题，它只是文本。

第一个是我这样的自定义标题；

export const HeaderWithBackTitle = ({title}: {title: string}) => {
  const navigation = useNavigation();
  const HeaderOptions: NativeStackNavigationOptions = {
    headerTitle: '',
    headerStyle: {
      backgroundColor: UIColors.darkMode,
    },
    headerLeft: () => (
      <View
        style={{alignItems: 'center'}}
        row
        backgroundColor={UIColors.darkMode}>
        <PressableOpacity marginL-12 onPress={() => navigation.goBack()}>
          <Image
            style={{width: 30, height: 30}}
            source={require('../imgs/backIcon.png')}
          />
        </PressableOpacity>
        <View style={{maxWidth: '85%'}} marginL-30>
          <Text textColor darkGreyBlue regularText>
            {title}
          </Text>
        </View>
      </View>
    ),
  };
  return HeaderOptions;
};

我是这样渲染的；

  <Stack.Screen
        name="Entries"
        component={Entries}
        options={({route}) => HeaderWithBackTitle({title: route.params?.title})}
      />

不知道它是怎么发生的。

React Native 版本； 0.66.3 React 导航版本：^0.6.6

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

通过这样做解决了这个问题；

export const HeaderWithBackTitle = ({title}: {title: string}) => {
  const navigation = useNavigation();
  const HeaderOptions: NativeStackNavigationOptions = {
    // headerTitle: '',  <--- I was using this and it was working in older versions
    headerStyle: {
      backgroundColor: UIColors.darkMode,
    },
    title: '', // <---- This line should be included
    headerLeft: () => (
      <View
        style={{alignItems: 'center'}}
        row
        backgroundColor={UIColors.darkMode}>
        <PressableOpacity marginL-12 onPress={() => navigation.goBack()}>
          <Image
            style={{width: 30, height: 30}}
            source={require('../imgs/backIcon.png')}
          />
        </PressableOpacity>
        <View style={{maxWidth: '85%'}} marginL-30>
          <Text textColor darkGreyBlue regularText>
            {title}
          </Text>
        </View>
      </View>
    ),
  };
  return HeaderOptions;
};

所以基本上我需要为“title”属性提供空字符串。真的很惊讶，我找不到任何与此相关的问题，我猜很多人还在使用旧版本。

【讨论】：