Реагировать на проблему Native FlatList с изображением и текстом

Question

ОПИСАНИЕ

У меня есть этот код с некоторыми стилями, и он выглядит как https://i.stack.imgur.com/Gnlr5.png. Я не хочу, чтобы этот синий фоновый размер текста имел ширину и высоту 100, я просто хочу, чтобы изображение было с шириной и высотой 100.

ОЖИДАЕМАЯ ВЕРСИЯ

Он работает так, как ожидалось, когда я не использую изображения https://i.stack.imgur.com/4fP6H.png. Но я хочу, чтобы ширина и высота контейнера составляли 100, когда есть изображение, в противном случае отрегулируйте его до количества текста.

CODE

<FlatList
style={{ flex: 1 }}
data={this.state.data}
inverted
keyExtriactor={(time, index) => index.toString()}
renderItem={({ item }) => {
    return (
        <View>
            <View style={styles.container}>
                <View style={{ backgroundColor: '#529FF3', margin: 10 }}>
                    <Text style={{ paddingVertical: 10, fontSize: 15, paddingStart: 5, paddingEnd: 16, color: 'black' }}>
                        {item.text}</Text>
                    <Image source={{ uri: item.imgUrl }} style={{ height: 100, width: 100 }} />
                </View>
            </View>
        </View>
    )
}} /> 

Answer 1

Я создал пример, может он поможет вам проверить это https://snack.expo.io/@jsfit / 4bf0f2