我刚开始学习Reactive原住民,这是我第一个尝试通过json从OMDB获取电影的项目。
问题是,我想从数据库中获取所有的电影,只是为了方便,我的问题是,我不知道如何获取所有的电影,我创建了一个api,它只获取与“星星”相关的电影,因为我在下面的api链接中使用"star“作为搜索类型,那么有谁能帮我抓取所有的电影呢?谢谢..
API链接I用于从OMDBAPI:http://www.omdbapi.com/?s=star&apikey=480344f1&r=json获取
我还附上了我获取的文件,它运行得很好。
App.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>
);
}
}发布于 2018-09-14 20:53:53
你好,盖兹,我刚从哥哥那里得到了这个问题的答案。
这太简单了,我只是在我的fetchMovies函数"searchMovie“中创建了一个参数,并将其传递给api链接,就是这样,当我运行这个项目并搜索任何单词时,它会显示结果,相应地,我搜索的文本可以查看下面的代码。谢谢.!
Api.js
export const fetchMovies = async (searchMovie) => {
const response = await
fetch('http://www.omdbapi.com/?s='+ searchMovie +'&apikey=480344f1&r=json')
const result = await response.json()
return result
}https://stackoverflow.com/questions/52321375
复制相似问题