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

【问题标题】：How To Get Props in another Screen in react navigation?如何在反应导航的另一个屏幕中获取道具？
【发布时间】：2019-02-07 23:36:28
【问题描述】：

我在将道具传递到另一个屏幕时遇到反应导航问题，当用户按下列表地点之一时，我需要将一些道具传递给详细信息屏幕

错误：

这是我的代码

减速器

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;

【问题讨论】：

标签： javascript reactjs react-native redux react-redux

【解决方案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 }；

【讨论】：

【解决方案2】：

您的 PlaceDetail 有一些错误

<TouchableOpacity onPress={props.onItemDeleted}>

<TouchableOpacity onPress={props.onModalClosed}>

把 props 改成 this.props

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

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

但我在任何地方都看不到 onItemDeleted 和 onModalClosed，别忘了也通过 props 将它们传递给 PlaceDetail :)

【讨论】：