javascript - React Native 奇怪地换行文本

Question

我正在尝试在组件的 View 内渲染一行文本。但文本在单词级别上没有正确换行，而是随机换行。我认为它试图在新线上安装更长的线，但这不是我想要的。这是一个世博会应用程序。

如果标准文本标签不适合这个，那么还有其他选择吗？

这是我的组件:

请求商品

import React from "react";
import { Text, View } from "react-native";
import { MarkdownView } from "react-native-markdown-view";
import Tag from "../common/Tag";
import Colors from "../../constants/Colors";
import styles from "./Styles";

const RequestItem = ({ type, title, priority, creator, rid, createDate, dueDate }) => {
  return (
    <View style={styles.RequestContainer}>
      <View>
        <Tag title={type} color={type === "S" ? Colors.BlueAccent : Colors.GreenAccent} />
      </View>
      <View style={styles.RequestTitleContainer}>
        <View>
          <Text style={styles.RequestTitle}>
            {`${title} `}
            <Tag
              title={priority}
              color={
                // eslint-disable-next-line no-nested-ternary
                priority === "High"
                  ? Colors.RedAccent
                  : priority === "Medium"
                  ? Colors.BlueAccent
                  : Colors.GreenAccent
              }
            />
          </Text>
        </View>
        <View>
          <Text style={{ borderWidth: 2, borderColor: "red" }}>
            {`**${creator}** created the request with id: **${rid}** on 
              **${createDate}** due on **${dueDate}**`}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default RequestItem;

样式

import { StyleSheet } from "react-native";
import Colors from "../../constants/Colors";

const styles = StyleSheet.create({
  RequestContainer: {
    borderColor: Colors.GrayAccent,
    borderRadius: 5,
    borderWidth: 1,
    flexDirection: "row",
    margin: 10,
    padding: 4,
  },
  RequestTitle: {
    fontWeight: "bold",
  },
  RequestTitleContainer: {
    flexDirection: "column",
    flexWrap: "wrap",
    marginLeft: 5,
  },
});

export default styles;

正如您在此处看到的，文本行 Aug 7, 2018 可以轻松地适合上一行。还是从这里开始，内容换行了。这是为什么？

我尝试使用 flex-wrap: "wrap"，但这没有帮助。

我想在单词级别换行文本。我该怎么办？

Answer 1

因为您尝试打印的字符串中有一个新行。点击反引号 (``) 内的 ENTER 将触发新行。因此接下来的内容将显示在新行中。

示例:

console.log(`something
    else`);

将打印 2 行。