Question

我正在尝试在组件的视图内渲染一行文本。但是文本在单词级别上不能正确换行，而是随机换行。我认为它正在尝试在新行中加入更长的行，但这不是我想要的。这是一个Expo应用。

如果标准的Text标签不适用于此目的，那么还有其他替代方法吗？

这是我的组件：

请求项

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;

正如您在此处看到的那样，文本行 2018年8月7日可以轻松地适应上一行。仍然从此开始，内容被换行了。为什么会这样？

我尝试了usig flex-wrap：“ wrap”，但这没有帮助。

我想将文字包裹在单词级别。我该怎么办？

Answer 1

因为要打印的字符串中有新行。在反引号（``）中敲击ENTER将触发新行。因此，接下来的内容将显示在新行上。

示例：

console.log(`something
    else`);

将打印两行。

Answer 2

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

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

由于我在输入时将其分为2部分，所以发生了这种情况。

反应本地包装文本奇怪

2 个答案: