Реагировать на нативный, как получить детали одного элемента для отображения на другой странице, если этот элемент выбран из списка элементов

Question

Я новичок, чтобы реагировать и реагировать на родных. У меня есть компонент, который отображает достижения из базы данных sqlite, используя ax ios с успокоительным API, я также использую Redux.

Из списка предварительных записей я хочу выбрать одну предварительную запись, чтобы перейти на эту страницу подробных сведений. Однако на данный момент я не знаю, как это реализовать.

**advanceActions.js**

import axios from "axios";
import {
  GET_ADVANCES,
  DETAIL_ADVANCE,

} from "./types";

//FETCH ADVANCES

export const getAdvances = () => dispatch => {
  axios
    .get("http://localhost:8000/api/advance/")
    .then(res => {
      dispatch({
        type: GET_ADVANCES,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

    // GET ONE ADVANCE
export const detailAdvance = id => dispatch => {
  axios
    .get(`http://localhost:8000/api/advance/${id}/`)
    .then(res => {
      dispatch({
        type: DETAIL_ADVANCE,
        payload: res.data
      });
    })
    .catch(err => console.log("Axios not able to fetch single advance", err));
};

advanceReducers. js

import {
  GET_ADVANCES,
  DETAIL_ADVANCE,
} from "../actions/types";

const initialState = {
  items: [],
  item: {}
};


export default function(state = initialState, action) {
  switch (action.type) {
    case GET_ADVANCES:
      return {
        ...state,
        items: action.payload

      };
    case DETAIL_ADVANCE:
      return {
        ...state,
        item: action.payload
      };
    default:
      return state;
  }
}



**//Advance list page(AdvanceLand.js)**

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import {
  getAdvances,
  addAdvance
} from "../actions/advanceActions";

import {
  Text,
  View,
  Button,
  FlatList,
  StyleSheet,
  ScrollView,
  TouchableOpacity
} from "react-native";

class AdvanceLand extends Component {
  componentDidMount() {
    this.props.getAdvances();
  }

  renderItem = ({ item }) => {
    let { navigation } = this.props;
    return (
      <TouchableOpacity
        style={{ flex: 1, flexDirection: "row", marginBottom: 3 }}
        onPress={() => navigation.navigate("AdvanceDetails", { id: item.id })}
      >
        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >
          <View style={styles.containerOne}>
            <Text style={styles.textOne}>{`${item.name}`}</Text>
            <Text style={styles.textTwo}>{`${item.position}`}</Text>
          </View>
          <View style={styles.containerTwo}>
            <Text style={styles.textOne}>{`${item.advancedamnt}`}</Text>
            <Text style={styles.textTwo}>{`${item.date}`}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };
  render() {
    const { navigation } = this.props;
      return (
      <ScrollView>
        <View style={styles.container}>
          <Text style={styles.heading}> Advance Summaries</Text>
          <View
            style={{
              flex: 1,
              alignSelf: "stretch",
              flexDirection: "row",
              height: 35,
              fontSize: 30,
              margin: 10
            }}
          >
            <View style={styles.containerOne}>
              <Text style={styles.textOne}>Staff Name</Text>
              <Text style={styles.textTwo}>Position</Text>
            </View>
            <View style={styles.containerTwo}>
              <Text style={styles.textOne}>Shs: Advance</Text>
              <Text style={styles.textTwo}>Date of Payment</Text>
            </View>
          </View>
          <FlatList
            data={this.props.advances}
            renderItem={this.renderItem}
            keyExtractor={item => item.id.toString()}

          />
          <TouchableOpacity
            style={styles.TouchableOpacityStyle}
            onPress={() => navigation.navigate("advance")}
          >
            <Text style={styles.TouchableOpacityAdd}>+</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}

AdvanceLand.propTypes = {
  getAdvances: PropTypes.func.isRequired,
  advances: PropTypes.array.isRequired
};

const mapStateToProps = state => ({
  advances: state.advances.items
});

export default connect(mapStateToProps, { getAdvances })(AdvanceLand);

advanceDetails. js Это страница с подробностями аванса, которую я хочу показать детали одного продукта, но показывает для всех продуктов

import React, { Component } from "react";
import {
  Text,
  View,
  Button,
  FlatList,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity
} from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getAdvances, deleteAdvance } from "../actions/advanceActions";

class AdvanceDetails extends Component {
  componentDidMount() {
    this.props.getAdvances();
  }

  renderItem = ({ item }) => {
    return (
      <View>
        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >
          <Text style={{ flex: 1, alignSelf: "stretch" }}> Date</Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.date}`}</Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >
          <Image
            style={{
              alignSelf: "center",
              width: 50,
              height: 50,
              marginRight: 5
            }}
            source={require("../images/worker.jpg")}
          />
          <Text style={{ flex: 1, alignSelf: "stretch" }}> Name </Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.name}`}</Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >
          <Text style={{ flex: 1, alignSelf: "stretch" }}> Gender </Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.gender}`}</Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >

          <Text style={{ flex: 1, alignSelf: "stretch" }}> Position </Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.position}`}</Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >

          <Text style={{ flex: 1, alignSelf: "stretch" }}> Status </Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.status}`}</Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >

          <Text style={{ flex: 1, alignSelf: "stretch" }}>Advanced Amount</Text>
          <Text style={{ flex: 1, alignSelf: "stretch" }}>
            Shs: {`${item.advancedamnt}`}
          </Text>
        </View>

        <View
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            height: 35,
            margin: 10
          }}
        >

          <Text style={{ flex: 1, alignSelf: "stretch" }}> Description </Text>
          <Text
            style={{ flex: 1, alignSelf: "stretch" }}
          >{`${item.description}`}</Text>
        </View>
        <TouchableOpacity
          onPress={this.props.deleteAdvance.bind(this, item.id)}
          style={{
            flex: 1,
            alignSelf: "stretch",
            flexDirection: "row",
            backgroundColor: "#CEDCF2",
            height: 35,
            borderBottomColor: "#CEDCF2",
            fontSize: 30,
            borderBottomWidth: 2,
            margin: 10
          }}
        >
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
    );
  };
  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>Advance details</Text>
        <FlatList
          data={this.props.advance}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => index.toString()}

        />
      </View>
    );
  }
}
AdvanceDetails.propTypes = {
  getAdvances: PropTypes.func.isRequired,
  deleteAdvance: PropTypes.func.isRequired,
  advance: PropTypes.object

};
const mapStateToProps = state => ({
  advance: state.advances.items


});

export default connect(mapStateToProps, { getAdvances, deleteAdvance })(
  AdvanceDetails
);