React Native中的文本换行

nkkqxpd9  于 2023-01-14  发布在  React
关注(0)|答案(2)|浏览(333)

我尝试将文本 Package 在<Text>(红色背景)中,但没有成功。我尝试使用flexWrap: wrap。组件代码(功能组件)和样式(在styles常量中的剪切结束处)见下文。

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

const ChatListItem = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: "https://notjustdev-dummy.s3.us-east-2.amazonaws.com/avatars/lukas.jpeg",
        }}
        style={styles.image}
      />
      <View style={styles.content}>
        <View style={styles.row}>
          <Text style={styles.name}>lukas</Text>
          <Text style={styles.time}>4:00</Text>
        </View>
        <Text style={styles.subTitle}>
          abideabide abideabide abideabide abideabide abideabide abideabide
          abideabide abideabide abideabide abideabide abideabide
          abideabideabideabid
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginHorizontal: 20,
    marginVertical: 10,
    height: 70,
  },
  image: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  content: {
    flex: 1,
  },
  row: {
    flexDirection: "row",
    marginBottom: 5,
  },
  name: {
    flex: 1,
    fontWeight: "bold",
  },
  time: {
    color: "gray",
  },
  subTitle: {
    backgroundColor: "red",
    flexWrap: "wrap",
  },
});

export default ChatListItem;

谢谢您对以上问题的帮助。

uwopmtnx

uwopmtnx1#

当您说文本不换行时,它看起来像什么?也许subTitle组件需要定义一个固定的宽度,例如width: 100

2hh7jdfx

2hh7jdfx2#

添加flexShrink:1并从样式中移除height属性,则生成了可接受的结果。

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginHorizontal: 20,
    marginVertical: 10,
    flexShrink: 1,
  },
  image: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  content: {
    flex: 1,
  },
  row: {
    flexDirection: "row",
    marginBottom: 5,
  },
  name: {
    flex: 1,
    fontWeight: "bold",
  },
  time: {
    color: "gray",
  },
  subTitle: {
    backgroundColor: "red",
    flexWrap: "wrap",
  },
});

相关问题