平面列表中的文本移出屏幕时自然反应

Question

我基本上尝试了这个问题的每个答案，但似乎没有任何效果：React原生文本离开我的屏幕，拒绝换行。怎么办？

我面临着同样的问题，我的文本离开屏幕，似乎以大约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,
  }
});

这是聊天预览组件，其中消息文本会离开屏幕：

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

巧合的是，我昨天也在做类似的事情。所以当你使用弹性方向行时，文本（默认为100%，它试图获得给定的所有宽度）会离开屏幕，因为现在100%就是你所说的130%。现在要限制它，我们只需要限制它的宽度。所以在文本上设置宽度，也许只有60%或70%，它就可以正常工作了。

Answer 2

从父级到子级设置flex： 1可能是值得的，因为内容会离开屏幕。我遇到过忘记这样做的问题，而且搞砸了。

基本上，你可以添加flex： 1到ChatPreview中的每种风格来尝试一下，它看起来可能不会非常好，但你应该看看问题是否得到解决，我相信并从那里进行调整。