反应原生纸张标题Appbar.Content问题

问题描述

在此图像中听到的声音是我在Appbar（反应本机纸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>
  );
}

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

解决方法

在last的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