Блог

Я не добавил к нему никакого стиля, это происходит только с локальными изображениями, если я придаю ему непрозрачность 0,2, я едва вижу изображение, но не могу сделать его видимым должным образом.

 import React from 'react';
import { View, FlatList } from 'react-native';
import { ListItem, Avatar , Image } from 'react-native-elements';


function Menu(props) {

const renderMenuItem = ({ item, index }) => {
    return (
        <ListItem key={index} onPress={() => props.onPress(item.id)}>
            <Avatar rounded source={require('./images/uthapizza.png')} />
            <ListItem.Content>
                <ListItem.Title>{item.name}</ListItem.Title>
                <ListItem.Subtitle>{item.description}</ListItem.Subtitle>
            </ListItem.Content>
        </ListItem>
    );
}

return (
    <View>
        <Image source={require('./images/uthapizza.png')}
        style={{ width: 40, height: 40, opacity: 0.7 }} />
        <FlatList
            keyExtractor={item => item.id.toString()}
            data={props.dishes}
            renderItem={renderMenuItem}
        />
    </View>
)
}

export default Menu;
  

Столкнулся с той же проблемой и нашел (возможно, обходной путь?) решение:

Попробуйте добавить атрибут placeholderStyle={{ backgroundColor: 'transparent' }} в компонент Avatar:

  <Avatar rounded source={require('./images/uthapizza.png')} placeholderStyle={{ backgroundColor: 'transparent' }} />
  

Рабочая закуска: https://snack.expo.io/@lovebytes/confused-pizza

Документы React Native Elements (компонент Avatar): https://reactnativeelements.com/docs/avatar/#placeholderstyle