#javascript #react-native #jsx #google-books #google-books-api
Вопрос:
Я создаю простое приложение, в котором я беру некоторые URL-адреса из базы данных и отображаю их в карусели изображений. Я делаю это с помощью функции _renderItem (), которую я создал. Однако у меня возникла проблема с изображением в этой функции. Изображение не отображается, за исключением того, что переменная, которую я использую в качестве uri, является фактической ссылкой и не является неопределенной. Это связано с тем, что ссылка на изображение в Google книгах не работает. Однако я уже создавал подобное приложение раньше, и ничего не произошло.
Добавление книги в базу данных:
<Button
//icon="login"
mode="outlined"
loading={this.state.loading}
color="black"
onPress={async () => {
if (this.state.search == '' || undefined) {
alert(
'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
);
} else {
await axios
.get(
`https://www.googleapis.com/books/v1/volumes?q=isbn:${this.state.search}amp;key=(not going to reveal my key)`,
)
.then(async res => {
this.setState({
results: res.data.items,
});
console.log(this.state.results[0]);
console.log(this.props.route.params.email, 'props');
await axios
.post('http://localhost:3000/books', {
title: this.state.results[0].volumeInfo.title,
author:
this.state.results[0].volumeInfo.authors.toString(),
cover:
this.state.results[0].volumeInfo.imageLinks.thumbnail,
checkedOut: false,
lenderEmail: this.props.route.params.email,
})
.then(res => {
alert('Success! Book has been added.');
console.log(res);
});
})
.catch(err => {
console.log(err);
alert(
'That is not a valid ISBN code. If it is, check if you are connected to the internet and try again.',
);
});
}
}}
contentStyle={{
width: 175,
height: 50,
justifyContent: 'center',
alignItems: 'center',
}}
style={{
marginTop: 30,
}}>
Add The Book
</Button>
Моя функция _renderItem() :
_renderItem = ({item, index}) => {
return (
<TouchableOpacity
style={{
marginLeft: 25,
marginRight: 25,
borderRadius: 5,
height: 'auto',
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
}}
onPress={() => {
this.props.navigation.navigate('Book', {
image: item.cover,
title: item.title,
author: item.author,
id: item._id,
checkedOut: item.checkedOut,
});
}}>
<Image
source={{uri: item.cover}}
style={{
borderRadius: 5,
height: 'auto',
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
}}></Image>
</TouchableOpacity>
);
};
Кто-нибудь, пожалуйста, может мне помочь?
Спасибо.
Комментарии:
1. Вы хотите сказать, что » localhost:3000/книги » не может быть сохранен должным образом при вызове этой части?
2. Нет, я говорю, что есть проблема с сохранением миниатюры книги.