反应原生文本走出容器答案

【问题标题】：React Native Text Going Out of Container反应原生文本走出容器
【发布时间】：2019-02-20 08:44:06
【问题描述】：

我在这样的视图容器中有文本

<View
  style={{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'grey'
  }}
>
  <Text>Long Text Here</Text>
</View>

我的结果是这样的

如果我添加<Text numberOfLines={4}>，这可以正常工作，但我希望我的文本完全适合视图，如果超出范围，它将显示三个点。我不确定多少行就足够了，因为不同的屏幕尺寸会有所不同。

【问题讨论】：

您可能会发现这个问题很有帮助：stackoverflow.com/questions/45290420/…。设置 flex 是一种常见的解决方法。涉及动态字体大小的解决方案将花费大量 IMO。

标签： javascript react-native

【解决方案1】：

使您的容器可滚动，然后数据将保留在容器内。使用

<ScrollView>
 // data
</ScrollView>

【讨论】：

这是一个选项，但我在图块上启用了点击，它会阻碍滚动。我只想要三个点，没有明确告诉 numberOfLines
使用行数 ' "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。” '

【解决方案2】：

你可以在<Text>使用这个，

numberOfLines={10}  // obviously whatever no. of lines you want
ellipsizeMode="tail"

这将在超过行时放置...

【讨论】：

我明白了，但是让我们假设在 iPad 上 10 行是可以的，但是在像 iPhone 这样的小屏幕上，那么 5 行是限制的，然后会发生这样的事情，不会有......像这样的点.所以我只想在超出界限时出现“尾巴”或三个点，尽管有很多行。