长文本通过本机反应将其他元素推离屏幕

Question

我正在尝试使用 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>

Answer 1

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

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

Answer 2

您必须width在要截断的文本组件上设置 a （即使它是容器的 100%，我想象的是 Flexbox 子组件），并将numberOfLinesprop 设置为 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在文本组件样式中使用。