反應本機文本換行

Question

目前我正在開發一個反應原生應用程序。 我有文本換行的問題，但是文本會換行，因此有時一行中的最后一個單詞會溢出容器，即使最后一行還有空間。 我該如何解決？

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"
  }