react native 论文 header Appbar.Content issue

Question

在这张图片中听到我在 Appbar 中添加了标题（react native paper appbar）但它没有显示完整。

我要显示整个标题

听说是我的密码

export default function Header(props) {
  const navigation = useNavigation();
  return (
    <Appbar.Header style={{backgroundColor: primaryBlack}}>
      <Appbar.Action
        icon="menu"
        onPress={() => navigation.openDrawer()}
        size={28}
        style={{paddingLeft: 3}}
      />
      <Appbar.Content 
          title={<Text style={{color: textColor, fontSize: 20}}> This 
        is not display </Text>}
          style={{marginLeft: -10}}
       />
    <Appbar.Content
      onPress={() =>
       props.goback ? navigation.goBack() : navigation.navigate('Profile')
      }
      title={
      <TouchableOpacity
        onPress={() =>
          props.goback ? navigation.goBack() : navigation.navigate('Profile')
        }
        style={{flexDirection: 'row', display: 'flex'}}>
        <Icon name={'ellipsis-vertical'} size={20} color={'#000'} />
        <Text style={{color: textColor, fontSize: 21}}>test</Text>
      </TouchableOpacity>
     }
     style={{alignItems: 'flex-end'}}
    />
    </Appbar.Header>
  );
}

请帮我解决这个问题...

Answer 1

在最后 App.Bar 内容样式中添加 flex:0 喜欢

<Appbar.Content
      onPress={() =>
       props.goback ? navigation.goBack() : navigation.navigate('Profile')
      }
      title={
      <TouchableOpacity
        onPress={() =>
          props.goback ? navigation.goBack() : navigation.navigate('Profile')
        }
        style={{flexDirection: 'row', display: 'flex'}}>
        <Icon name={'ellipsis-vertical'} size={20} color={'#000'} />
        <Text style={{color: textColor, fontSize: 21}}>test</Text>
      </TouchableOpacity>
     }
     style={{flex: 0}} // Update with this style will solve the issue
 />

检查示例Snack

react native 论文 header Appbar.Content issue

react native paper header Appbar.Content issue

react-native

react-native-paper