Question

我一直在尝试通过道具传递参数来显示图像，如我的相关代码所示：

function ListItem(props) {
    return (
        <TouchableHighlight
            onPress={() => (props.onPress ? props.onPress() : null)}>
            <ViewDefine widthOffset={-60}>
                <View
                    style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                    }}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>

                        <Image
                            source={require('../../images/manageport.png')}
                            //source={require(props.iconPath)}
                            resizeMode={'contain'}
                            style={{
                                width: 32,
                                height: 32,
                            }}
                        />

                        <Text style={[fontNormal2, {marginLeft: 10}]}>{props.text}</Text>
                    </View>
                    <View>
                        <IconComponent
                            iconName={'arrow-right'}
                            iconSize={20}
                            iconColor={'gray'}
                        />
                    </View>
                </View>
            </ViewDefine>
        </TouchableHighlight>
    );
}

另一个将prop传递给上述代码的函数：

<ListItem
    onPress={() => navigate('ManagePort')}
    iconPath={'../../images/manageport.png'}
    //iconName={'briefcase'}
    //iconColor={'violet'}
    text={'จัดการผลงาน'}
/>

结果是

[fatal][tid:main] src/screen/Profile.js: src/screen/Profile.js:Invalid call at line 57: require(props.iconPath)

请帮忙。

Answer 1

您尝试过

<ListItem
    onPress={() => navigate('ManagePort')}
    iconPath={require('../../images/manageport.png')}
    //iconName={'briefcase'}
    //iconColor={'violet'}
    text={'จัดการผลงาน'}
/>

<Image
  // source={require('../../images/manageport.png')}
  source={props.iconPath}
  resizeMode={'contain'}
  style={{
    width: 32,
    height: 32,
  }}
/>

传递参数作为图像显示的道具

1 个答案: