Javascript 如何在react navigation的另一个屏幕中获取道具？

我在将道具传递到另一个屏幕时遇到问题， 当用户按下列表中的一个位置时，我需要将一些道具传递到详细信息屏幕，我需要在屏幕上显示一些关于该位置的详细信息，如位置名称和位置图像

错误：

这是我的密码

减速器 位置列表组件

从“React”导入React；
从“react native”导入{FlatList，StyleSheet，ScrollView}；
从“./ListItem/ListItem”导入ListItem；
const PlaceList=props=>{
返回(
(
props.onItemSelected（info.item.key）}
/>
)}
keyExtractor={index=>String（index）}
/>
);
};
导出默认放置列表；

查找位置屏幕

import React，{Component}来自“React”；
从“react native”导入{View，Text}；
从“react redux”导入{connect}；
从“react navigation”导入{StackActions}；
从“../../Components/PlaceList/PlaceList”导入PlaceList；
类FindPlaceScreen扩展组件{
构造函数（）{
超级（）；
}
itemSelectedHandler=key=>{
const selPlace=this.props.places.find（place=>{
return place.key==key；
});
this.props.navigation.push（“PlaceDetail”{
selectedPlace:selPlace，
名称：selPlace.name，
image:selPlace.image
});
};
render（）{
返回(
);
}
}
常量mapStateToProps=状态=>{
返回{
地点：州。地点。地点
};
};
导出默认连接（MapStateTops）（FindPlaceScreen）；

放置详细信息屏幕

import React，{Component}来自“React”；
从“react native”导入{视图、文本、图像、TouchableOpacity、样式表}；
从“反应本机矢量图标/离子图标”导入图标；
类PlaceDetail扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.navigation.state.params.namePlace}
);
}
}
导出默认位置详细信息；

对于查找位置屏幕，您需要使用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}

对于查找位置屏幕，您需要使用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}

您的PlaceDetail有一些错误

<TouchableOpacity onPress={props.onItemDeleted}>

<TouchableOpacity onPress={props.onModalClosed}>

将道具更改为this.props

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

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

---

但是我看不到任何地方有

onitmdeleted

和

onModalClosed

，也不要忘记通过道具将它们传递给PlaceDetail:）

您的PlaceDetail有一些错误

<TouchableOpacity onPress={props.onItemDeleted}>

<TouchableOpacity onPress={props.onModalClosed}>

将道具更改为this.props

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

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

但我看不到

onItemDeleted

和

onModalClosed

任何地方，也不要忘记通过道具将它们传递给PlaceDetail:）

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

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