使用本机反应将其他元素推离屏幕的长文本答案

【问题标题】：Long text pushing other elements off screen with react native使用本机反应将其他元素推离屏幕的长文本
【发布时间】：2017-12-06 18:26:28
【问题描述】：

我正在尝试使用 Flexbox 在 React-Native 中构建布局，但当文本很长时我遇到了问题。我希望布局看起来像这样：

但是，当蓝色文本变长时，它会将日期从屏幕右侧推开，如下所示：

我故意让文本保持在 1 行。我想要的是蓝色文本尽可能扩大而不会使文本缩小。我是 RN 的新手，我在 CSS 方面的工作非常有限，所以我没有太多做这类事情的经验。这是我的样式表代码：

const styles = StyleSheet.create({
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  subtitle: {
    fontSize: 20,
    color: '#656565'
  },
  dateContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

最后，我的布局代码：

<TouchableHighlight
    underlayColor='#dddddd'>
      <View style={styles.rowContainer}>
          <View  cstyle={styles.textContainer}>
            <Text numberOfLines={1} style={styles.title}>{rowData.name}</Text>
            <Text style={styles.subtitle}>{rowData.teacher}</Text>
          </View>
          <View style={styles.dateContainer}>
            <Text style={styles.subtitle}>{result}</Text>
          </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>

【问题讨论】：

只是一个建议 - 尝试给 dateContainer 一个最小宽度值？
我试过了，但是蓝色的文字在日期文字下面
@beyerss 不确定我是否理解所需的功能，当文本太长时会发生什么？
试试“textContainer”类的最大宽度怎么样？
如果我做百分比，那可能会给日期留下太多空间。例如，平板电脑将比手机拥有更多的空白空间。到目前为止，这是最好的解决方案，但我希望有更好的方法来做到这一点，以便标题可以一直增长到日期文本。

标签： css layout react-native flexbox react-native-android

【解决方案1】：

您必须在要截断的文本组件上设置 width（即使它是我想象的 flexbox 子容器的 100%），并将 numberOfLines 属性设置为 1（或不管你想允许多少行）。请参阅此处有关椭圆模式和行数的文档。

https://facebook.github.io/react-native/docs/text.html#ellipsizemode

我上面解释的代码示例：

<View style={{display: 'flex', flexDirection: 'row', overflow: 'hidden'}}>
    <View>
      <Text
        numberOfLines={1}
        style={{width: '100%'}}>Text here that I want to truncate</Text>
      <Text
        numberOfLines={1}
        style={{width:'100%'}}>Another line of text</Text>
    </View>
    <View style={{width: 120}}>
        <Text>01/01/2017</Text>
    </View>
</View>

如果您仍然遇到问题，您可能还需要在文本组件样式中使用 overflow: hidden。

【讨论】：

我无法让它工作，我已经尝试在文本组件中使用和不使用overflow: hidden。

【解决方案2】：

要解决您的问题，请将flex: 1 从dateContainer 中删除，它不会离开屏幕。

dateContainer: {
  //flex: 1, line removed
  justifyContent: 'center',
  alignItems: 'flex-end'
},

将flex: 1 添加到您的rowContainer，如下所示：

rowContainer: {
   flex: 1, //Line added
   flexDirection: 'row',
   padding: 10
}

【讨论】：

【解决方案3】：

我最终解决了这个问题，方法是测量父视图的宽度（使用onLayout 回调），然后将文本父视图的宽度设置为余数。

这意味着组件中有一些状态，但可以将其转换为具有左侧动态大小组件和右侧静态组件的通用组件。

【讨论】：

【解决方案4】：

从dateContainer 中删除flex: 1 并将flexWrap: 'wrap' 添加到textContainer。

textContainer: {
  flex: 1,
  flexWrap: 'wrap'
},
dateContainer: {
  justifyContent: 'center',
  alignItems: 'flex-end'
},

【讨论】：