时间戳

首页 > 解决方案 > 反应本机文本换行

reactjs - 反应本机文本换行

问题描述

目前我正在开发一个反应原生应用程序。我有文本换行的问题，但是文本会换行，因此有时一行中的最后一个单词会溢出容器，即使最后一行还有空间。我该如何解决？

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;

标签： reactjsreact-nativetext

解决方案

像这样改变你的textContainer风格。

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

推荐阅读