Javascript 截断文本-反应本机

我有一个带有平面列表的React原生应用程序

我添加的逻辑是，每当第100个位置的字符不为空时，应添加展开/折叠箭头，如下所示。短消息没有箭头图标

这是错误的逻辑！！现在，当我将我的应用程序字体更改为大/小时，这种逻辑将不起作用。它不适用于汉字太LOL。所以它不应该基于字符数

{  alert.charAt(100) !== "" ?
                arrowClicked === true ? 
                <Icon type='materialicons' name='arrow-drop-up' onPress={()=>{this.setFullLength()}}  />
                : 
                <Icon type='materialicons' name='arrow-drop-down' onPress={()=>{this.setFullLength()}}  />
                : null
            } 

{alert.charAt（100）！==“”？
单击箭头===真？
{this.setFullLength（）}}/>
: 
{this.setFullLength（）}}/>
：null
} 

---

它应该检测到文本很长并且被截断。我如何实现这个？？请帮忙

您应该使用onTextLayout，并使用如下内容确定行长度

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      {showMore && (
        <Button title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

功能自定义文本（道具）{
const[showMore，setShowMore]=React.useState（false）；
const[lines，setLines]=React.useState（props.numberOfLines）；
const onTextLayout=（e）=>{
塞肖莫尔(
e、 nativeEvent.lines.length>props.numberOfLines&&lines！==0
);
};
返回(
{props.children}
{showMore&&(
{
设定线（0）；
设置showmore（假）；
}}
/>
)}
{！showMore&&(
{
设置线（道具编号）；
}}
/>
)}
);
}

用法

常量文本=
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑到mak'；
{text}

---

您还可以传递其他道具，如样式。

您应该使用onTextLayout，并使用以下内容确定行长度

function CustomText(props) {
  const [showMore, setShowMore] = React.useState(false);
  const [lines, setLines] = React.useState(props.numberOfLines);

  const onTextLayout = (e) => {
    setShowMore(
      e.nativeEvent.lines.length > props.numberOfLines && lines !== 0
    );
  };

  return (
    <View>
      <Text numberOfLines={lines} onTextLayout={onTextLayout}>
        {props.children}
      </Text>
      {showMore && (
        <Button title="Show More"
          onPress={() => {
            setLines(0);
            setShowMore(false);
          }}
        />
      )}
      {!showMore && (
        <Button title="Hide More"
          onPress={() => {
            setLines(props.numberOfLines);
          }}
        />
      )}
    </View>
  );
}

功能自定义文本（道具）{
const[showMore，setShowMore]=React.useState（false）；
const[lines，setLines]=React.useState（props.numberOfLines）；
const onTextLayout=（e）=>{
塞肖莫尔(
e、 nativeEvent.lines.length>props.numberOfLines&&lines！==0
);
};
返回(
{props.children}
{showMore&&(
{
设定线（0）；
设置showmore（假）；
}}
/>
)}
{！showMore&&(
{
设置线（道具编号）；
}}
/>
)}
);
}

用法

常量文本=
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑到mak'；
{text}

---

你也可以传递其他道具，比如样式。

也许这可以帮助你：不。对于“字体：正常”，我可以这样做。现在我把字体改成“大”，这样就不行了？也许这能帮你：不。对于“字体：正常”，我可以这样做。现在我把字体改成“大”，这样就不行了，太好了！！！但这将为每一行显示“ShowMore”和“hidemore”。它应该只显示长消息，而不是短消息。我如何限制它？？您更改了numberOfLines吗？numberOfLines={3}。假设我有两条消息。一条信息只有一行。第二条信息长得像10行。“显示更多”功能应仅在长消息中显示。（这是我公司的要求，不是我的LOL）啊，你可以在按钮上显示一个逻辑。请注意，在这里说“谢谢”的首选方式是投票选出好的问题和有帮助的答案，以及对你问的任何问题的最有帮助的答案。这太棒了！！！但这将为每一行显示“ShowMore”和“hidemore”。它应该只显示长消息，而不是短消息。我如何限制它？？您更改了numberOfLines吗？numberOfLines={3}。假设我有两条消息。一条信息只有一行。第二条信息长得像10行。“显示更多”功能应仅在长消息中显示。（这是我公司的要求，不是我的LOL）啊，你可以在显示按钮上添加一个逻辑请注意，在这里说“谢谢”的首选方式是向上投票好的问题和有用的答案，以及对你提出的任何问题的最有用的答案