Я только начинаю изучать React Native, и это мой первый проект, в котором я пытаюсь получить фильмы из API OMDB через json.
Дело в том, что я хочу получить все фильмы из базы данных просто дляЭто легко, и моя проблема в том, что у меня нет идеи, как я могу получить все фильмы, я создал API, который выбирает только фильмы, относящиеся к «звезде», потому что я использую «звезду» в качестве типа поиска в этой ссылке API, опубликованной ниже, так чтоЕсть ли кто-нибудь, кто может помочь мне получить все фильмы?Спасибо ..
API ССЫЛКА, которую я использую для извлечения из OMDBAPI: http://www.omdbapi.com/?s=star&apikey=480344f1&r=json
Я также прикрепил файлы так, как я их получил, и все работает нормально.
Приложение.js
import React from 'react';
import DetailsScreen from './screens/DetailsScreen'
import SearchScreen from './screens/SearchScreen';
import { createStackNavigator } from 'react-navigation';
const StackNavigator = createStackNavigator({
SearchStack: SearchScreen,
InfoStack: DetailsScreen,
},
{
initialRouteName: 'SearchStack',
},
);
export default class App extends React.Component {
render() {
return (
<StackNavigator />
);
}
}
Api.js
export const fetchMovies = async () => {
const response = await
fetch('http://www.omdbapi.com/?s=star&apikey=480344f1&r=json')
const result = await response.json()
return result
}
SearchScreen.js
export default class SearchScreen extends React.Component {
static navigationOptions = {
headerTitle: 'Home'
}
constructor(props) {
super(props);
this.state = {
isLoading: true,
search: '',
movies: [],
}
}
/*componentDidMount() {
this.getMovies()
} */
getMovies = async (text) => {
const result = await fetchMovies(text)
this.setState({
movies: result.Search,
});
}
renderItem = item => {
console.log('We are Rendering ...' + item);
return (
<TouchableOpacity
style={{ alignItems: 'center', flexDirection: 'row', padding: 10,}}
onPress={() => { this.props.navigation.navigate('InfoStack') }}>
<Image style={{ height: 50, width: 50, justifyContent: 'center' }} source={{ uri: item.item.Poster }} />
<View style={{ flexDirection: "column", marginLeft: 12,}}>
<Text style={{ fontSize: 14, fontWeight: 'bold', justifyContent: 'center' }}>{item.item.Title}</Text>
<Text style={{ fontSize: 14, justifyContent: 'center' }}>{item.item.imdbID}</Text>
</View>
</TouchableOpacity>
);
}
separateItem = () => {
return (
<View style={{ height: 1, width: '100%', backgroundColor: 'black' }}>
</View>
);
}
render() {
console.log("Fetched Movies in backend" + this.state.movies);
return (
<View style={styles.searchBox}>
<SearchBar
lightTheme
placeholder="Search Here"
onChangeText={text => this.getMovies(text)} />
<View style={styles.container}>
<FlatList
data={this.state.movies}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.separateItem}
/>
</View>
</View>
);
}
}