使用react native将其他元素推离屏幕的长文本

3wabscal 于 2022-11-17 发布在 React

关注(0)|答案(5)|浏览(179)

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

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

我故意让文本保持在一行。我想要的是蓝色文本尽可能地扩展而不使文本收缩。我是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>

react-native

来源：https://stackoverflow.com/questions/44886349/long-text-pushing-other-elements-off-screen-with-react-native

5条答案

按热度按时间

dy1byipe1#

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

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

赞(0）回复(0）举报 2022-11-17

vsnjm48y2#

你必须在你想要截断的文本组件上设置一个width（即使它是100%的容器，我想它是flexbox的孩子），并且还设置numberOfLines prop为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。

赞(0）回复(0）举报 2022-11-17

ev7lccsx3#

要解决您的问题，请从dateContainer中删除flex: 1，它不会从屏幕上消失。

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

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

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

赞(0）回复(0）举报 2022-11-17

9gm1akwq4#

最后，我通过测量父视图的宽度（使用onLayout回调函数），然后将文本父视图的宽度设置为余数来解决这个问题。
这意味着在组件中有一些状态，但是它可以被转换成一个通用组件，该组件具有左侧的动态大小的组件和右侧的静态组件。

赞(0）回复(0）举报 2022-11-17

bpsygsoo5#

解决这个问题的方法是将flexGrow: 0添加到将其他元素推开的元素中。

赞(0）回复(0）举报 2022-11-17

我来回答

使用react native将其他元素推离屏幕的长文本

5条答案

相关问题

热门标签

最新问答