#react-native
#react-native
Вопрос:
Я не добавил к нему никакого стиля, это происходит только с локальными изображениями, если я придаю ему непрозрачность 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;
Ответ №1:
Столкнулся с той же проблемой и нашел (возможно, обходной путь?) решение:
Попробуйте добавить атрибут 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
Комментарии:
1. Недавно возникла эта проблема и с удаленно загруженными изображениями. Спасибо за исправление @Kakisha.