Реагируй на оригинальную упаковку текста странно - PullRequest
Новая
       33

Реагируй на оригинальную упаковку текста странно

0 голосов
/ 31 мая 2019

Я пытаюсь визуализировать строку текста внутри представления в моем компоненте. Но текст не переносится правильно на уровне слов, а случайно переходит на новую строку. Я думаю, что он пытается разместить более длинную линию на новой линии, но это не то, что я хочу. Это приложение 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;

Styles 

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;

Как вы можете видеть здесь, строка текста 7 августа 2018 легко помещается на предыдущей строке. Все еще начиная с него, содержимое было перенесено на новую строку. Почему это?

Я попробовал usig flex-wrap: "wrap", но это не помогло.

Я хотел обернуть текст на уровне слов. Как мне это сделать?

Screenshot of weird wrapping

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Поскольку внутри строки вы пытаетесь напечатать новую строку. Нажатие ENTER внутри обратных букв (``) вызовет новую строку. То, что будет дальше, будет отображаться в новой строке.

Пример: 

console.log(`something
    else`);

Будет печатать в 2 строки.

0 голосов
/ 31 мая 2019

Я понял, проблема была с этой строкой:

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

Так как я разбил его на 2 части с вводом, это происходило.

...