奇怪地反应原生包装文本答案

【问题标题】：React Native wrapping Text oddly奇怪地反应原生包装文本
【发布时间】：2019-10-17 00:33:30
【问题描述】：

我正在尝试在组件的视图中呈现一行文本。但是文本在单词级别上没有正确换行，而是随机换行。我认为它试图在一条新线上放一条更长的线，但这不是我想要的。这是一个 Expo 应用程序。

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

这是我的组件：

请求项目

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"，但这并没有帮助。

我想在单词级别包装文本。我该怎么办？

【问题讨论】：

标签： javascript react-native jsx expo word-wrap

【解决方案1】：

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

例子：

console.log(`something
    else`);

将打印 2 行。

【讨论】：

是的，我想通了。为了减少每行的字符，我遇到了这个问题。

【解决方案2】：

我明白了，问题出在这行：

{**${creator}** created the request with id: **${rid}** on **${createDate}** due on **${dueDate}**}

由于我将其分解为两部分，因此正在发生这种情况。

【讨论】：