Как получить подробные данные из реактивной системы FlatList с помощью реагирующей навигации с триггером - кнопкой onPress () из базовой базы? - PullRequest
Новая
       7

Как получить подробные данные из реактивной системы FlatList с помощью реагирующей навигации с триггером - кнопкой onPress () из базовой базы?

0 голосов
/ 02 апреля 2019

Я использую этот API в течение недели и манипулирую данными: https://api.themoviedb.org/3/discover/movie?api_key=9a4a662a126525b07d4b84b079d809d8&language=en-US&sort_by=popularity.asc&include_adult=false&include_video=false&page=1

Каждые данные имеют идентификатор, например, если вы проверяете этот JSON-файл, например, заглавный фильм типа «Как приручить дракона».: «Скрытый мир» и этот фильм имеет идентификатор 166428, из моего Flatlist, чтобы показать, что все фильмы данных становятся списком, и работает ли он, как обычный список фильмов в мобильном приложении, но я не знаю, как получить подробные данные иманипулировать им, если я нажму на кнопку детали, я получу ошибку, перейдите или что-то еще.Как я могу решить это?

Вот код:

MovieList.js 

// create constructor
    constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            sort_by : 'popularity.desc',
            include_adult_movie : false,
            include_video : false,
            page : 1,
            //
            error : null,
            refreshing : false
        };

    }

    // call the API function
    componentDidMount = () => {
        this.makeRemoteRequest();
    }
    // call the api url and manipulate it
    makeRemoteRequest = () => {
        const {
            api_version,
            api_key,
            language,
            sort_by,
            include_adult_movie,
            include_video,
            page
        } = this.state
        const url = `https://api.themoviedb.org/${api_version}/discover/movie?api_key=${api_key}&language=${language}&sort_by=${sort_by}&include_adult=${include_adult_movie}&include_video=${include_video}&page=${page}`;
        this.setState({ loading : true })
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                // refreshing: false
            });
        })
        .catch(error => {
            this.setState({ error, loading: false});
        });
    }

    // infinite scroll
    handleLoadMore = () => {
        this.setState({
            page: this.state.page + 1,
            loading: true
        }, () => {
            this.makeRemoteRequest();
        });
    }

    // render forward to detail item
    // handleItemTouch = ({ item }) => {
    //  this.setState({
    //      movie_id: this.state.movie_id + item.id,
    //      loading: true
    //  }, () => {
    //      this.props.navigation.navigate("MovieListData_Detail", movie_id);
    //  });
    // }

    // render movie item
    renderItem = ({ item }) => {
        return (
            // touchable item
                <ListItem 
                    Thumbnail
                    // onPress={() => this.handleItemTouch}
                    onPress={() => this.navigation.navigate("MovieListData_Detail", item.id)}
                >
                        <Left>
                            <Thumbnail style = {{ height: 120, borderRadius: 30/2}} square large source= {{ uri:"https://image.tmdb.org/t/p/w185" + item.poster_path }}/>
                                <Body>
                                    <Text style = { stylesWindow.fontMainColor } >{ item.title }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Release Date : { item.release_date }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Vote Avarage : { item.vote_average }</Text>
                                    <Text style = { stylesWindow.fontMainColor } note >Language : { item.original_language}</Text>
                                </Body>
                        </Left>
                            <Icon name="arrow-forward" style={ stylesWindow.iconColor }/>
                </ListItem>
        );
    }

MovieDetail.js 

 // create constructor
    constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            movie_id : null,
            //
            error : null,
            refreshing : false
        };
    }

    // call the API function
    componentDidMount = () => {
        this.makeRemoteRequest();
    }
    // call the api url and manipulate it
    makeRemoteRequest = () => {
        const {
            api_version,
            api_key,
            movie_id,
            language
        } = this.state
        const url = `https://api.themoviedb.org/${api_version}/movie/${movie_id}?api_key=${api_key}&language=${language}`;
        this.setState({ loading : true })
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                // refreshing: false
            });
        })
        .catch(error => {
            this.setState({ error, loading: false});
        });
    }

    handleDetailData = ({ item }) => {
        this.setState({
            movie_id: this.state.movie_id + item.id,
            loading: true
        }, () => {
            this.makeRemoteRequest();
        });
    }

    // render movie item
    renderItem = ({ item }) => {
        return (
            // touchable item
            <Text>{ item.title }</Text>
        );
    }


    render(){
        // const item = this.props.navigation.state.params;
        return(
            <Container>
                <Header
                    style = { stylesWindow.headerBackgroundColor }
                    androidStatusBarColor="#504F6D"
                    iosBarStyle="light-content"
                >
                    <Left>
                        <Button transparent>
                            <Icon name="menu" style={ stylesWindow.iconColor }/>
                        </Button>
                    </Left>
                        <Body>
                            {/* <Title>{ item.title }</Title>
                            <Subtitle>{ item.release_date }</Subtitle> */}
                        </Body>
                    <Right />
                </Header>
                    <Content style = {stylesWindow.ContentStyleColor}>
                        <FlatList 
                            data = { this.state.data }
                            // render per item
                            renderItem = { this.renderItem }
                            // key list
                            keyExtractor={ this.handleDetailData }
                        />
                    </Content>
            </Container>
        );
    }
}

После того, как я увижу ваши коды, ребята и спроситев другом месте мой код выглядит так:

MovieList.js 

    renderItem = ({ item }) => {
        return (
            // touchable item
                <ListItem 
                    Thumbnail
                    onPress={() => this.props.navigation.navigate("MovieListData_Detail", {id: item.id})}

и MovieDetail.js 

constructor(props){
        super(props);

        // default statement
        this.state = {
            loading : false,
            data : [],
            // depends on API
            // using API TmDB API
            api_version : 3,
            api_key : '9a4a662a126525b07d4b84b079d809d8',
            language : 'en-US',
            // optional param
            movie_id : null,
            //
            error : null,
            refreshing : false
        };
    }

    // // call the API function
    // componentDidMount = () => {
    //  this.makeRemoteRequest();
    // }

    componentDidMount = () => {
        const item = this.props.navigation.state.params;
        // console.log(item);
        this.setState({
            movie_id : item.id
        }, () => {
            this.makeRemoteRequest();
        })
    }

, а затем выполняйте манипуляцию с render () 

  <Content style = {stylesWindow.ContentStyleColor}>
                        <Text style = { stylesWindow.fontMainColor } >{ item.title }</Text>
                    </Content>

Наверняка покажем ошибку, снова не могу найти переменную.

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Передайте все item таким образом 

onPress={() => this.navigation.navigate("MovieListData_Detail", {item})}

, затем на MovieDetail

const {item} = this.props.navigation.state.params;
// then try to read the whole item, for example
console.log(item, item.title);
1 голос
/ 02 апреля 2019

Вам нужно будет передать весь элемент, чтобы вы могли вызывать другие элементы, такие как title, release_date и т. Д. Передача {id:item.id} пропустит только id.

MovieList.js 

<ListItemThumbnail
      onPress={() => this.props.navigation.navigate("MovieListData_Detail", {item: item})}>

        .....

</ListItemThumbnail>

MovieDetail.js 

<Content style = {stylesWindow.ContentStyleColor}>
     <FlatList 
       data = {this.props.navigation.state.params.item}
       renderItem ={({item}) => 
           <Text>{item.title}</Text>
          }
      />
   </Content>
...