如何在反应导航中的另一个屏幕中获取道具？

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

您需要在查找位置屏幕上使用react-native-navigation 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
            }
        }
    });
};

确保从“ react-native-navigation”导入{Navigation}；

Answer 2

您的PlaceDetail出错

<TouchableOpacity onPress={props.onItemDeleted}>

<TouchableOpacity onPress={props.onModalClosed}>

将道具更改为this.props

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

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

但是我在任何地方都看不到onItemDeleted和onModalClosed，也不要忘记通过道具将它们传递给PlaceDetail：）