React Native Text Wrap

Question

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

import { Text, View, Dimensions, StyleSheet } from "react-native";

const TextCard = () => {
  const emojy = "Sonne";
  const header = "Solarenergie unterstützen";
  const content =
    "Damit unterstützt du eines der vielen Solarprojekte von Atmosfair auf der ganzen Welt";
  const footer = "Schon ab 6€ 260kg CO2 pro Jahr binden";

  return (
    <View style={styles.container}>
      <Text>{emojy}</Text>
      <View style={styles.textContainer}>
        <Text style={styles.headerText}>{header}</Text>
        <Text style={styles.contentText}>{content}</Text>
        <Text style={styles.footerText}>{footer}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#CCC",
    width: Dimensions.get("screen").width * 0.85,
    height: 130,
    borderRadius: 20,
    paddingHorizontal: 20,
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 10,
  },
  contentText: {
    fontWeight: "500",
    fontSize: 14,
    color: "#444",
  },
  footerText: {
    fontWeight: "300",
    fontSize: 14,
    color: "#777",
  },
  headerText: {
    fontWeight: "600",
    fontSize: 16,
    color: "#444",
  },
  textContainer: {
    marginLeft: 20,
    height: "100%",
    justifyContent: "space-evenly",
  },
});

export default TextCard;

Answer 1

Измените свой стиль textContainer следующим образом.

  textContainer: {
    marginLeft: 20,
    height: "100%",
    justifyContent: "space-evenly",
    flexDirection: "row",
    flex: 1,
    flexWrap: "wrap"
  }