#react-native #expo
#react-native #expo
Вопрос:
Я новичок в React native и expo, и я пытаюсь обрабатывать профиль пользователя (редактировать профиль, изображение профиля и т. Д.).
Мне удалось успешно извлечь информацию о пользователе из API и отправить ему изменения, такие как имя пользователя или пароль, но я не могу сделать это для изображения профиля.
Я уже пробовал использовать axios (то, что я использую для связи с API):
async componentDidMount() {
const token = await this.getToken();
const AuthStr = 'Bearer '.concat(token);
await axios.get('https://....jpg', { headers: { Authorization: AuthStr } })
.then(res => {
console.log('RESPONSE: ', res.data);
})
.catch((error) => {
console.log('error ' error);
});
}
Но это возвращает мне ошибку 500
Затем я попробовал с файловой системой из Expo:
let download = FileSystem.createDownloadResumable('https://...jpg',
FileSystem.documentDirectory 'profile.jpg',
{ headers: { Authorization: AuthStr } },
null,
null);
try {
const { uri } = await download.downloadAsync();
console.log('Finished downloading to ', uri);
this.setState({
pic: uri,
});
} catch (e) {
console.error(e);
}
let info = await FileSystem.getInfoAsync(this.state.pic, null);
console.log(info);
В журнале указано, что файл загружен, а путь примерно такой:
file:///var/mobile/Containers/Data/Application/20CF6F63-E14D-4C14-9078-EEAF50A37DE1/Documents/ExponentExperienceData/%40anonymous%app/profile.jpg
Функция getInfoAsync() возвращает значение true, означающее, что изображение существует в файловой системе. Когда я пытаюсь отобразить его с помощью <Image source={{uri: this.state.pic}}/>
, он ничего не отображает. Что я делаю не так?
Комментарии:
1. Вы проверили объем файла изображения, который вы сохраняете?
2. Вы правы, я думаю, что с загрузкой что-то не так, потому что
getInfoAsync
показывает, что файл имеет размер всего 111 байт, но я понятия не имею, почему
Ответ №1:
временное решение — переместить изображение в галерею
let { uri } = await FileSystem.downloadAsync(this.props.item.imgUrl, FileSystem.cacheDirectory ${this.props.item}.jpg);
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status === 'granted') {
CameraRoll.saveToCameraRoll(uri).then((uriGallery) => {
//here you have the url of the gallery to be able to use it
});
}
Это ссылка, на которую я ссылался при написании ответа.
Комментарии:
1. Я только что протестировал и получил ошибку
Error decoding image data <NSData 0x28076e280; 111 bytes>
. Я думаю, что это скорее проблема с загрузкой изображения, но я не знаю, где оно должно быть2. Если вы посмотрите на прикрепленную ссылку, вы поймете