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（即使它是100％的容器，这是我想象的flexbox子容器），并将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。

Answer 3

要解决您的问题，请从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
}

Answer 4

我最终通过测量父视图的宽度（使用onLayout回调）然后将文本的父级宽度设置为余数来解决此问题。

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

长文本推出屏幕上的其他元素与本机反应

4 个答案: