Question

我没有添加任何样式，这仅在本地图像上发生，如果我给它的不透明度为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;

Answer 1

遇到相同的问题，找到了（也许可以解决方法？）解决方案：

尝试将属性placeholderStyle={{ backgroundColor: 'transparent' }}添加到Avatar组件：

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

工作小吃：https://snack.expo.io/@lovebytes/confused-pizza

反应本机元素文档（阿凡达组件）：https://reactnativeelements.com/docs/avatar/#placeholderstyle

反应显示为灰色背景的本机本地图像

1 个答案: