首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何根据Omdbapi React本地搜索的电影获取所有电影

如何根据Omdbapi React本地搜索的电影获取所有电影
EN

Stack Overflow用户
提问于 2018-09-13 20:29:46
回答 1查看 2.5K关注 0票数 1

我刚开始学习Reactive原住民,这是我第一个尝试通过json从OMDB获取电影的项目。

问题是,我想从数据库中获取所有的电影,只是为了方便,我的问题是,我不知道如何获取所有的电影,我创建了一个api,它只获取与“星星”相关的电影,因为我在下面的api链接中使用"star“作为搜索类型,那么有谁能帮我抓取所有的电影呢?谢谢..

API链接I用于从OMDBAPI:http://www.omdbapi.com/?s=star&apikey=480344f1&r=json获取

我还附上了我获取的文件,它运行得很好。

App.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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>
        );
    }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-14 20:53:53

你好,盖兹,我刚从哥哥那里得到了这个问题的答案。

这太简单了,我只是在我的fetchMovies函数"searchMovie“中创建了一个参数,并将其传递给api链接,就是这样,当我运行这个项目并搜索任何单词时,它会显示结果,相应地,我搜索的文本可以查看下面的代码。谢谢.!

Api.js

代码语言:javascript
复制
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
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52321375

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档