Fatal编程技术网
  • javascript/
  • Javascript 如何使用带触发器的react导航从本机基础上的按钮onPress（）从FlatList react本机获取详细数据？

Javascript 如何使用带触发器的react导航从本机基础上的按钮onPress（）从FlatList react本机获取详细数据？

javascript react-native

Javascript 如何使用带触发器的react导航从本机基础上的按钮onPress（）从FlatList react本机获取详细数据？,javascript,react-native,react-native-android,react-navigation,Javascript,React Native,React Native Android,React Navigation,我已经使用此API一周了，并对数据进行了操作： 每个数据都有一个id，例如，如果你检查JSON文件，例如标题电影“如何训练你的龙：隐藏的世界”，该电影的id是166428，从我的平面列表显示所有数据电影成为列表，它是否工作，就像移动应用程序中的普通电影列表一样，但我不知道如何获取细节数据并对其进行操作，如果我点击“获取细节”按钮，就会得到错误、导航或其他任何信息。我怎样才能解决这个问题 代码如下： MovieList.js // create constructor construct

我已经使用此API一周了，并对数据进行了操作：

每个数据都有一个id，例如，如果你检查JSON文件，例如标题电影“如何训练你的龙：隐藏的世界”，该电影的id是166428，从我的平面列表显示所有数据电影成为列表，它是否工作，就像移动应用程序中的普通电影列表一样，但我不知道如何获取细节数据并对其进行操作，如果我点击“获取细节”按钮，就会得到错误、导航或其他任何信息。我怎样才能解决这个问题

代码如下：

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>
        );
    }
然后操纵到渲染（）


{item.title}
当然再次显示错误无法找到变量项。

您需要传递整个项，以便调用其他项，如标题、发布日期等。传递
{id:item.id}
只传递
id
本身

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>
        );
    }

this.props.navigation.navigate（“MovieListData_Detail”，{item:item}）}>
.....
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>
        );
    }
}

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();
        })
    }


{item.title}
}
/>
您需要传递整个项目，以便调用其他项目，如标题、发布日期等。传递
{id:item.id}
只传递
id
本身

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>
        );
    }

this.props.navigation.navigate（“MovieListData_Detail”，{item:item}）}>
.....
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>
        );
    }
}

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();
        })
    }


{item.title}
}
/>
以这种方式传递整个
项目



onPress={（）=>this.navigation.navigate（“MovieListData_Detail”，{item}


然后在
MovieDetail


const{item}=this.props.navigation.state.params；
//然后试着阅读整个项目，例如
console.log（项，项，标题）；

以这种方式传递整个
项目



onPress={（）=>this.navigation.navigate（“MovieListData_Detail”，{item}


然后在
MovieDetail


const{item}=this.props.navigation.state.params；
//然后试着阅读整个项目，例如
console.log（项，项，标题）；

是的，我使用了这个代码模式：MovieList.js this.handleItemTouch}onPress={（）=>this.props.navigation.navigate（“MovieListData_Detail”，“id:item.id}”）在MovieDetail.js中我使用这个代码const item=this.props.navigation.state.params；然后我尝试使用console.warn（item）查看结果；获取项目id，但我不知道如何操作它或显示数据，我正在尝试使用{Item.title}但是没有显示电影的标题。有没有其他方法可以不使用平面列表从API中获取数据？使用循环的
怎么样？啊，我明白了：）是的，我使用了这个代码模式：MovieList.js this.handleItemTouch}onPress={（）=>this.props.navigation.navigate（“MovieListData_Detail”，{id:item.id}）>在MovieDetail.js中，我使用这个代码const item=this.props.navigation.state.params；然后我尝试使用console.warn（item）查看结果；并获取项目id，但我不知道如何操作它或显示数据，我正在尝试使用{Item.title}但不显示电影的标题。是否有其他方法可以不使用FlatList从API获取数据？使用
for loops
如何？啊，我明白了：）详细数据已经显示出来，并且确实有效！但是我收到了一条警告消息“status_code”：34，“status_message”：“找不到您请求的资源。我正在这样尝试：
onPress={（）=>this.props.navigation.navigate（“MovieListData_Detail”，{id:item.id}）}
然后我调用这样的状态参数：
componentDidMount=>{const item=this.props.navigation.state.params；//console.log（item）；this.setState（{movie_id:item.id}，（）=>{this.makeRemoteRequest（）；}）}
在警告消息中显示了如何在
render（）中获得操纵
我正在尝试调用
item.title
但是得到了错误。你不能按照我的建议：（尝试执行
onPress={（）=>this.navigation.navigate（“MovieListData_Detail”，“item}”）
然后
componentDidMount=>{const{item}=this.props.navigation.state.params；//console.log（item）}
让我知道它是否有帮助详细数据已经显示并且确实有效！但是我收到了一条警告消息“status_code”：34，“status_message”：“找不到您请求的资源。我正在这样尝试：
onPress={（）=>this.props.navigation.navigate”（“MovieListData_detail”，{id:item.id}）
然后我像这样调用状态参数：
componentDidMount=（）=>{const item=this.props.navigation.state.params；//console.log（item）；this.setState（{movie_id:item.id}，（）=>{this.makeRemoteRequest（）；}）
数据已经在警告消息中显示，我是如何在
render（）中获得操纵的。
我正在尝试调用
item.title
但得到了错误。您无法按照我的建议：（尝试执行
onPress={（）=>this.navigation.navigate（“MovieListData_Detail”，{item}）
然后
componentDidMount=>{const{item}=this.props.navigation.state.params；//console.log（item）；}
如果有帮助，请告诉我