React Native: значение для uri не может быть преобразовано в строку после рефакторинга

Question

Я занимаюсь рефакторингом проекта RN 0.62.2, помещая следующий раздел представления в компонент. Вот код до рефакторинга:

       <TouchableOpacity onPress={()=>{setModalDialog(index)}} >
            <FastImage 
                source={{uri:img_source}} 
                resizeMode={FastImage.resizeMode.cover} 
                key={index}
                style={{
                    width:width, 
                    height:ht, 
                    verticalAlign:0,
                    paddingTop:0,
                }}
            />
        </TouchableOpacity>

Приведенный выше код помещается в компонент GridImage следующим образом:

   const GridImage = (img_source, width, ht, index) => {
        return (
            <TouchableOpacity onPress={()=>{setModalDialog(index)}} >
                <FastImage 
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    key={index}
                    style={{
                        width:width, 
                        height:ht, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </TouchableOpacity>
        );
    }; 

GridImage вызывается, как показано ниже, вместо блок <TouchableOpacity>

                    <GridImage
                        img_source={img_source}
                        width={width}
                        ht={ht}
                        index={index}
                       />

Ошибка при выполнении рефакторинга:

введите описание изображения здесь

В чем ошибка? Код до рефакторинга работал нормально.

Answer 1

Переменная, переданная в компонент, должна быть заключена в объект. Следующее изменение в объявлении компонента работает:

const GridImage = ({img_source, width, ht, index}) => {...}