平面串列中的文本離開螢屏反應原生

我基本上嘗試了這個問題的所有答案，但似乎沒有任何效果：反應原生文本離開我的螢屏，拒絕換行。該怎么辦？

我面臨著同樣的問題，我的文本離開螢屏并且似乎以大約 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
    }
});

uj5u.com熱心網友回復：

可能值得將 flex:1 從父級設定到內容離開螢屏的子級。我遇到了一些我忘記做的問題，而且它被搞砸了。

本質上，您可以將 flex:1 添加到 ChatPreview 中的每種樣式以進行嘗試，它可能看起來不太好，但您應該看看問題是否已解決，我相信并從那里進行調整。

uj5u.com熱心網友回復：

巧合的是，我昨天也在做類似的事情。因此，當您使用 flex-direction row 時，文本（試圖獲取給它的所有寬度，默認為 100%）會離開螢屏，因為現在 100% 就是您所說的 130%。現在要限制它，我們只需要限制它的寬度。所以在文本上設定寬度，可能只有 60% 或 70% 就可以了。

標籤：

上一篇：未捕獲的型別錯誤：反應原生中的“無法讀取未定義的屬性”

下一篇：我無法滾動反應原生應用程式