react-native - 平面列表中的文本离开屏幕 react native

Question

我基本上尝试了这个问题的每个答案，但似乎没有任何效果:React native text going off my screen, refusing to wrap. What to do?

我面临同样的问题，我的文本超出屏幕，并且似乎以大约 130% 左右的宽度运行。

这是我呈现列表的屏幕:

<View style={styles.container}>
      <FlatList 
        data={messagePreviewData}
        renderItem={({ item }) => 
          <ChatPreview 
            readMessage={item.readMessage} 
            imgUri={item.imgUri} 
            username={item.username} 
            time={item.time} 
            message={item.message} 
          />
        }
        keyExtractor={(item, index) => item.username + index}
      />
    </View>

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.neutralOne,
    flex: 1,
  }
});

这是 ChatPreview 组件，消息文本在屏幕外显示:

const ChatPreview = (props: ChatPreviewProps) => {
    const { readMessage, imgUri, username, time, message } = props;
    return (
        <View style={styles.container}>
            <View style={styles.leftContainer}>
                <View style={styles.badgeAvatarContainer}>
                    <Avatar
                        rounded
                        source={{ uri: imgUri }}               
                        size={scaledSize(50)}
                    />
                </View>
                <View style={styles.usernameMessageContainer}>
                    <Text style={styles.username}>{username}</Text>
                    <Text style={styles.messagePreview} numberOfLines={2} ellipsizeMode='tail'>
                         {message} // this is what's going off screen
                    </Text>
                </View>
            </View>
            <Text style={styles.time}>{time}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
    },
    leftContainer: {
        flexDirection: 'row'
    },
    badgeAvatarContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 10
    },
    usernameMessageContainer: {
      // I have tried putting many things here and nothing seems to work
    },
    username: {
        color: colors.neutralEight,
        fontFamily: fonts.bodyTwoBold.fontFamily,
        fontSize: fonts.bodyTwoBold.fontSize,
        lineHeight: fonts.bodyTwoBold.lineHeight,
    },
    messagePreview: {
        color: colors.neutralFour,
        fontFamily: fonts.captionOne.fontFamily,
        fontSize: fonts.captionOne.fontSize,
        lineHeight: fonts.captionOne.lineHeight,
    },
    time: {
        color: colors.neutralFour,
        fontFamily: fonts.captionTwo.fontFamily,
        fontSize: fonts.captionTwo.fontSize,
        lineHeight: fonts.captionTwo.lineHeight
    }
});

Answer 1

可能值得将 flex:1 设置为从父级到内容超出屏幕的子级。我曾经遇到过忘记执行此操作并且搞砸了的问题。

本质上，您可以将 flex:1 添加到 ChatPreview 中的每种样式中进行尝试，它看起来可能不太好，但我相信您应该看看问题是否已解决，并从那里进行调整。