Question

我正在通过api wordpress获取新闻列表并显示posts.js。现在，我要转到1post.js页面，方法是单击每个项目并显示该特定项目。

componentDidMount(){
return fetch('URL/wp/api/get_posts')
    .then( (response) => response.json() )
    .then( (responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.posts,
      })             
    })
    .catch((error)=> {
    });     
} render() { if (this.state.isLoading){ return ( ) } else{ let posts=this.state.dataSource.map((val, key) => { return {val.title} }); return ( {posts} );

Answer 1

要从一个组件导航到另一个组件，您需要创建一个导航容器。 react-navigation是用于在组件之间导航的官方模块。访问this链接以创建堆栈导航器，然后可以使用以下代码实现上述内容。

async componentDidMount() {
    fetch('URL/wp/api/get_posts')
    .then(res => res.json())
    .then(data => this.setState({posts: data }))
}

renderPostList(){
    return this.state.posts.map(post=>(
        <TouchableOpacity onPress={this.props.navigation.navigate("NextScreen",{selectedPost:post})}>
            <Text>{post.title}</Text>
        </TouchableOpacity>
    ))
}
render() {

    return (
        <View>
            {this.renderPostList()}
        </View>
    )
}

如何从postlist（posts.js）获取ID并在react native中显示在post.js页面上

1 个答案: