React native决定何时切断文本

Question

我使用的是反应原生的有限数量的线,显示为'...'使用

<Text numberOfLines={4}> {myText} </Text>

现在我的问题是,如果文本被截断,我想展示一些特殊的图像,导航到一个新的视图.我想知道是否有一个属性我可以用来测试文本是否被切断？

Answer 1

现在有一个名为 的新事件onTextLayout可以为您提供文本中的行数。获取此数字后，您可以检查它是否大于您想要的最大行数，如果是这种情况，您可以设置一些状态来添加道具，numberOfLines也可用于确定文本是否被截断。

以下是如何获取行数的示例：

 <Text
  onTextLayout={(e) => console.log("Number of lines: " + e.nativeEvent.lines.length) }
>
  {someText}                
</Text>

Answer 2

现在没有这个属性(不幸的是).

这里有一个功能请求:https://github.com/facebook/react-native/issues/2496(还有一些关于如何使其工作的建议,但实现链接已关闭).

你可以测量一定数量的线占用的空间,然后自己处理吗？但不理想.

Answer 3

Text 组件有一个 onPress 事件，可以处理该事件以导航到另一个场景。要启用导航，应将具有文本的组件放置在 NavigationIOS 组件中。文本组件还具有 ellipsizeMode 属性，该属性将“...”放在尾部。

<Text 
  numberOfLines={4}
  ellipsizeMode="tail"
  onPress={(e) => this.props.navigator.push({component: Detail})}
>
  {myText}
</Text>