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

Question

 <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>

其中的评论将是洛雷姆·伊普苏姆文本。对于样式：

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,
    },
  }));

这样做的目的是将所有文本放在头像和用户名下，而不是在用户名的一侧，并在文本溢出时添加分隔符。我该怎么做才能使文本分隔符？

Answer 1

您可以使用< code>{'\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>
  );