Как получить реквизит на другом экране в реагирующей навигации?

Question

У меня проблема с реакцией реагирования при передаче реквизитов на другой экран, мне нужно передать некоторые реквизиты на экран «Детали», когда пользователь нажимает на одну из «Список мест», которую мне нужно нажать на экране с некоторыми сведениями о месте, напримерНазвание места и изображение места,

Ошибки:

это мой код

Редуктор

import { ADD_PLACE, DELETE_PLACE } from "../actions/actionTypes";

const initialState = {
  places: []
};
import placeImage from "../../assets/img.jpg";

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_PLACE:
      return {
        ...state,
        places: state.places.concat({
          key: Math.random(),
          name: action.placeName,
          // image: placeImage,
          image: {
            uri:
              "https://images.unsplash.com/photo-1530009078773-9bf8a2f270c6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
          }
        })
      };
    case DELETE_PLACE:
      return {
        ...state,
        places: state.places.filter(place => {
          return place.key !== state.selectedPlace.key;
        })
      };

    default:
      return state;
  }
};

export default reducer;

Компонент списка мест

import React from "react";
import { FlatList, StyleSheet, ScrollView } from "react-native";

import ListItem from "../ListItem/ListItem";

const PlaceList = props => {
  return (
    <FlatList
      style={styles.listContainer}
      data={props.places}
      renderItem={info => (
        <ListItem
          placeName={info.item.name}
          placeImage={info.item.image}
          onItemPressed={() => props.onItemSelected(info.item.key)}
        />
      )}
      keyExtractor={index => String(index)}
    />
  );
};


export default PlaceList;

Экран поиска места

import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { StackActions } from "react-navigation";

import PlaceList from "../../Components/PlaceList/PlaceList";

class FindPlaceScreen extends Component {
  constructor() {
    super();
  }
  itemSelectedHandler = key => {
    const selPlace = this.props.places.find(place => {
      return place.key === key;
    });
    this.props.navigation.push("PlaceDetail", {
      selectedPlace: selPlace,
      name: selPlace.name,
      image: selPlace.image
    });

  };

  render() {
    return (
      <View>
        <PlaceList
          places={this.props.places}
          onItemSelected={this.itemSelectedHandler}
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    places: state.places.places
  };
};

export default connect(mapStateToProps)(FindPlaceScreen);

Экран сведений о месте

import React, { Component } from "react";
import { View, Text, Image, TouchableOpacity, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

class PlaceDetail extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <View style={styles.modalContainer}>
        <View>
          <Image
            source={this.props.navigation.state.params.image}
            style={styles.placeImage}
          />
          <Text style={styles.placeName}>
            {this.props.navigation.state.params.namePlace}
          </Text>
        </View>
        <View>
          <TouchableOpacity onPress={props.onItemDeleted}>
            <View style={styles.deleteButton}>
              <Icon size={30} name="ios-trash" color="red" />
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={props.onModalClosed}>
            <View style={styles.deleteButton}>
              <Icon size={30} name="ios-close" color="red" />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}



export default PlaceDetail;

Answer 1

Ваш PlaceDetail имеет некоторую ошибку

<TouchableOpacity onPress={props.onItemDeleted}>

<TouchableOpacity onPress={props.onModalClosed}>

Изменить реквизиты на this.props

<TouchableOpacity onPress={this.props.onItemDeleted}>

<TouchableOpacity onPress={this.props.onModalClosed}>

Но я нигде не вижу onItemDeleted и onModalClosed, нене забудьте передать их в PlaceDetail также через реквизит:)

Answer 2

Вам нужно использовать реактивную-навигацию v2 для экрана поиска места.

itemSelectedHandler = key => {
    const selPlace = this.props.places.find(place => {
        return place.key === key;
    });

    Navigation.push(this.props.componentId, {
        component: {
            name: 'PlaceDetail',
            options: {
                topBar: {
                    title: {
                        text: selPlace.name
                    }
                }
            },
            passProps: {
                selectedPlace: selPlace
            }
        }
    });
};

. Убедитесь, что вы импортировали {Navigation} из "act-native-navigation ";