javascript - 如何使用 wordpress 博客 API 后端在 React Native 中将值从主屏幕传递到详细屏幕？

问题描述

我正在开发 React Native 应用程序博客。我正在尝试获取和显示 wordpress 博客文章。我对屏幕之间的主要细节链接感到震惊。我需要帮助将值从主页面传递到详细信息页面。

我所需要的只是当单击列表或卡片时，它必须进入具有特定 ID 的详细信息页面。

我有两个文件 MainPage.js 和 DetailsPage.js

MainPage.js

import React, { Component } from 'react';
    import { Container, Header, Body, Title, Content, Card, CardItem, Text, 
    Button, Left, Icon } from 'native-base';
    import {
  StyleSheet,
  Dimensions,  
  TextInput,
  View,  
  ActivityIndicator,
  Image,
 } from 'react-native';

import Moment from 'moment';
import HTML from 'react-native-render-html';
import {createStackNavigator} from 'react-navigation';


export default class MainPage extends Component {
  static navigationOptions = {
  title: 'All Posts',
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      posts: [],
    };
  }


  _onDetailButtonPressed = () => {
    this.props.navigation.navigate(
        'Details');
  };


  componentDidMount() {
        fetch('http://whatsnewsnet.com/wp-json/wp/v2/posts?_embed')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            posts: responseJson,
          })
        })
        .catch((error) => {
          console.error(error);
        }); 
  }  

  render() {

    const { navigate } = this.props.navigation;

    if (this.state.isLoading == true) {
      return(
        <Container>
        <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center',}}>
          <ActivityIndicator size="large" color="#1C97F7" />
        </View>
        </Container>
      )
    }
    else{
    Moment.locale('en');    
    return (
      <Container>        

        <Content>
        {this.state.posts.map((item, index) => (
          <Card style={{flex: 0}} key = {item.id}>
            <CardItem>
              <Left>
                <Body>
                  <Text onPress={this._onDetailButtonPressed} style = {{ fontSize: 24, fontWeight:'bold' }}>{item.title.rendered}</Text>
                  <Text note>Published on: {Moment(item.date).format('d MMM Y')}</Text>
                </Body>
              </Left>
            </CardItem>

            <CardItem>
                <HTML html={item.excerpt.rendered} imagesMaxWidth={Dimensions.get('window').width} />                
            </CardItem>

            <CardItem>
              <Left>
                <Button onPress={() => navigate('Details', { I do not know how to pass particular id from here to detail page})} transparent textStyle={{color: '#87838B'}}>
                  <Text>Author:</Text>
                  {item._embedded.author.filter( element => element.id ==item.author).map((subitem, index) => (
                  <Text key = {item.id}>{subitem.name}</Text>
                  ))}
                </Button>
              </Left>
               </CardItem>  


          </Card>
        ))}
        </Content>
      </Container>
    )
  }
  }
}

标签： javascriptreact-nativewordpress-rest-api

javascript - 如何使用 wordpress 博客 API 后端在 React Native 中将值从主屏幕传递到详细屏幕？

问题描述

解决方案

推荐阅读