javascript - 如何使用带有触发器的反应导航从 FlatList react-native 获取详细数据是来自本机基础的按钮 onPress()？

问题描述

我已经使用此 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

每个数据都有一个 id，例如，如果您检查该 JSON 文件，例如标题电影，如“驯龙高手：隐藏的世界”，该电影的 id 为 166428，从我的平面列表中显示所有数据电影成为列表，它是否有效，就像移动应用程序中的一般电影列表一样，但我不知道如何获取详细数据并对其进行操作，如果我触摸详细信息按钮，我会收到错误，导航或任何内容。我该如何解决这个问题？

这里的代码：

电影列表.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>
        );
    }

电影细节.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>
        );
    }
}

在我看到你的代码并在不同的地方询问之后，我的代码是这样的

电影列表.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>

肯定会再次显示错误找不到变量项。

标签： javascriptreact-nativereact-native-androidreact-navigation

javascript - 如何使用带有触发器的反应导航从 FlatList react-native 获取详细数据是来自本机基础的按钮 onPress()？

问题描述

解决方案

推荐阅读