Передать параметр в качестве реквизита для отображения изображения

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>
    );
}

Другая функция, которая передает реквизиты вышеуказанному коду:

<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,
  }}
/>