如何在React Native上为文本添加换行符？

d6kp6zgx 于 2023-04-07 发布在 React

关注(0)|答案(2)|浏览(234)

我想创建一个像这样的评论组件：

问题是我没有找到一种方法来为lorem ipusm文本做样式。我尝试了下一个：

<View {...props} style={[styles.main, props.style]}>
  <View style={{ display: "flex", flexDirection: "row" }}>
    <Avatar user={user} />
    <Text style={styles.username}>{user.username}</Text>
  </View>
  <Text style={styles.comment}>
    {comment}
  </Text>
</View>

其中comment将是lorem Ipsum文本。对于样式：

export const useCommentTheme = () =>
  useCreateStyle((colors) => ({
    main: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      flexWrap: "wrap",
    },
    username: {
      color: colors.primary,
      fontFamily: poppins.extraBold,
      marginLeft: 5,
      fontSize: 16,
    },
    comment: {
      color: colors.text,
      marginLeft: 10,
      fontSize: 14,
    },
  }));

这是什么做的是把所有的文字下头像和用户名，而不是在旁边的用户名，并添加休息时，文字溢出。我怎么做，使文字休息

react-native

来源：https://stackoverflow.com/questions/73516959/how-to-add-line-breaks-to-text-on-react-native

2条答案

按热度按时间

plicqrtu1#

您可以使用{'\n'}，例如

const somePhrase =
    'Apples to oranges. Waffles to donuts. One two three four five six seven eight nine.';
  return (
    <View style={{flex:1,justifyContent:'center'}}>
      <Text style={{ textAlign: 'center' }}>
        {somePhrase.substring(0, 19)}
        {'\n'}
        {somePhrase.substring(19, 37)}
        {'\n'}
        {somePhrase.substring(37)}
      </Text>
    </View>
  );

赞(0）回复(0）举报 2023-04-07

nimxete22#

很简单，只需添加numberOfLines：

<Text
  numberOfLines={2} // change here as you need
>
  A very big text that should break into two lines ... 
</Text>

赞(0）回复(0）举报 2023-04-07

我来回答

如何在React Native上为文本添加换行符？

2条答案

相关问题

热门标签

最新问答