Javascript 如何在react native中传递state.params

你好，我对react native有点陌生，但我正在尝试使用react native maps做一些基本的应用程序。 我有一个登录屏幕，登录屏幕后，我有一个不同的抽屉，用于不同的条目。其中一个我调用ManageBinScreen，在ManageBinScreen内部调用我创建的MapScreen组件。 我创建了一个mapScreen作为类组件，在这个组件中我调用MarkerDetail，在MarkerDetail中我也调用markerEdit组件。但我面临这个错误：组件不是对象（评估'state.params'）。我无法找到解决此错误的方法，我知道它很长，但以下是我的代码：

管理器屏幕：

import React from 'react';
import MapScreen from '../mapScreen'

export default class AManageBinScreen extends React.Component {
  render() {
    return (
      <MapScreen navigation={ this.props.navigation }/>
    );    
  }
}
module.exports = AManageBinScreen;

从“React”导入React；
从“../MapScreen”导入MapScreen
导出默认类AManageBinScreen扩展React.Component{
render（）{
返回(
);    
}
}
module.exports=AManageBinScreen；

地图屏幕：

import { StyleSheet, TouchableHighlight, Text, View } from 'react-native';
import React from 'react';

import MapView from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps



export default class mapScreen extends React.Component {

  constructor(props) {
    super(props);
    this.goToMarkerDetail = this.goToMarkerDetail.bind(this);
  }

  state = { reports: [] };

  componentDidMount() {
    fetch('https://my-json-server.typicode.com/UmutYvz/JSONHOLDER/report')
      .then(res => res.json())
      .then(data => {
        //console.log(data)
        this.setState({ reports: data.reports })
      })
      .catch(console.error)
  }



  goToMarkerDetail(id) {
    //console.log(this.state.reports)
    this.props.navigation.navigate('MarkerDetail', {
      id: id,
      adress: this.state.reports[id].adress,
      street: this.state.reports[id].street,
      district: this.state.reports[id].district,
      city: this.state.reports[id].city,
      country: this.state.reports[id].county,
      info: this.state.reports[id].info,
      lon: this.state.reports[id].lon,
      lat: this.state.reports[id].lat,
    })
  }

  render() {
    return (
      <MapView
        style={{ ...StyleSheet.absoluteFillObject }}
        initialRegion={{
          latitude: 41.249374,
          longitude: 32.682974,
          latitudeDelta: 0.015,
          longitudeDelta: 0.015
        }} >
        {this.state.reports.map((report) =>
          <MapView.Marker
            key={report.id}
            coordinate={{
              latitude: report.lat,
              longitude: report.lon
            }}
            title={report.info}
            description={report.street}

          >
            <MapView.Callout tooltip onPress={() => this.goToMarkerDetail(report.id)} >
              <TouchableHighlight style={styles.container}>
                <View>
                  <Text style={styles.upperText}>{report.info}</Text>
                  <Text style={styles.lowerText}>{report.city}, {report.district}, {report.street}, {report.adress}</Text>
                </View>
              </TouchableHighlight>
            </MapView.Callout>

          </MapView.Marker>
        )}
      </MapView>
    );
  }
}
module.exports = mapScreen;

从'react native'导入{样式表，TouchableHighlight，文本，视图}；
从“React”导入React；
从“反应本机映射”导入MapView；//如果不使用谷歌地图，请删除提供程序\u谷歌导入
导出默认类mapScreen扩展React.Component{
建造师（道具）{
超级（道具）；
this.goToMarkerDetail=this.goToMarkerDetail.bind（this）；
}
状态={报告：[]}；
componentDidMount（）{
取（'https://my-json-server.typicode.com/UmutYvz/JSONHOLDER/report')
.then（res=>res.json（））
。然后（数据=>{
//console.log（数据）
this.setState（{reports:data.reports}）
})
.catch（console.error）
}
goToMarkerDetail（id）{
//console.log（this.state.reports）
this.props.navigation.navigate（'MarkerDetail'{
id:id，
地址：this.state.reports[id]。地址，
街道：this.state.reports[id]。街道，
地区：this.state.reports[id]。地区，
城市：this.state.reports[id]。城市，
国家：this.state.reports[id]。县，
信息：this.state.reports[id].info，
lon:this.state.reports[id].lon，
lat:this.state.reports[id].lat，
})
}
render（）{
返回(
{this.state.reports.map（（report）=>
this.goToMarkerDetail（report.id）}>
{report.info}
{report.city}，{report.district}，{report.street}，{report.address}
)}
);
}
}
module.exports=mapScreen；

MarkerDetail

import React from 'react';
import { StyleSheet, View, Text, TouchableHighlight, SafeAreaView, ScrollView } from 'react-native';
import MapView from 'react-native-maps';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons'


const mapDetailComponent = (props) => {

  

  const { state } = props.navigation;
  const info = {
    markerData: {
      id: state.params.id,
      adress: state.params.adress,
      street: state.params.street,
      district: state.params.district,
      city: state.params.city,
      country: state.params.country,
      info: state.params.info,
      latitude: state.params.lat,
      longitude: state.params.lon,
    },
    mapData: {
      latitude: state.params.lat,
      longitude: state.params.lon,
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121,
    },
  };

  return (
    <View style={styles.container}>
      <View style={styles.mapContainer}>
        <View style={styles.mapView}>
          <MapView
            style={styles.map}
            initialRegion={{
              latitude: info.mapData.latitude,
              longitude: info.mapData.longitude,
              latitudeDelta: 0.0015,
              longitudeDelta: 0.0015
            }}
          >
            <MapView.Marker
              key={state.params.id}
              coordinate={{
                latitude: info.markerData.latitude,
                longitude: info.markerData.longitude
              }}
              title={info.markerData.location}
              description={info.markerData.comments}
              onDragEnd={(e) => {
                info.markerData.latitude = e.nativeEvent.coordinate.latitude;
                info.markerData.longitude = e.nativeEvent.coordinate.longitude;
                console.log("New" + info.markerData.latitude + "...." + info.markerData.longitude)
              }
              }
            >
            </MapView.Marker>
          </MapView>
        </View>
      </View>

      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 }}>
        <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
        <View>
          <Text style={{ color: '#003f5c', width: 100, textAlign: 'center', fontWeight: 'bold', letterSpacing: 1, fontSize: 18 }}>DETAYLAR</Text>
        </View>
        <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
      </View>

      <SafeAreaView style={styles.infoContainer}>
        <ScrollView>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Konteyner ID: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.id}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Şehir: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.city}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>İlçe: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.district}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Mahalle: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.street}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Adres: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.adress}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Bilgiler: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.info}</Text>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>

      
      <View style={styles.buttons}>
        <TouchableHighlight style={styles.leftB} onPress={()=>props.navigation.navigate('MarkerEdit', {
            id: info.markerData.id,
            adress: info.markerData.adress,
            street: info.markerData.street,
            district: info.markerData.district,
            city: info.markerData.city,
            country: info.markerData.country,
            info: info.markerData.info,
            latitude: info.markerData.latitude,
            longitude: info.markerData.longitude,
          })}>
          <View style={styles.ltouchable}>
            <FontAwesomeIcon icon={faEdit} color='white' size={30} />
          </View>
        </TouchableHighlight>

        <TouchableHighlight style={styles.rightB} onPress={() => { console.log('right button') }}>
          <View style={styles.rtouchable}>
            <FontAwesomeIcon icon={faTrashAlt} color='white' size={30} />
          </View>
        </TouchableHighlight>
      </View>
    </View>
  );
}

从“React”导入React；
从“react native”导入{样式表、视图、文本、TouchableHighlight、SafeAreaView、ScrollView}；
从“react native maps”导入MapView；
从“@fortawesome/react-native-fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faEdit，faTrashAlt}
常量mapDetailComponent=（道具）=>{
const{state}=props.navigation；
常数信息={
markerData：{
id:state.params.id，
地址：state.params.address，
街道：state.params.street，
地区：state.params.district，
城市：state.params.city，
国家：state.params.country，
信息：state.params.info，
纬度：state.params.lat，
经度：state.params.lon，
},
地图数据：{
纬度：state.params.lat，
经度：state.params.lon，
纬度德尔塔：0.015，
纵向德尔塔：0.0121，
},
};
返回(
{
info.markerData.latitude=e.nativeEvent.coordinate.latitude；
info.markerData.longitude=e.nativeEvent.coordinate.longitude；
log（“新建”+info.markerData.latitude+“…”+info.markerData.longitude）
}
}
>
德泰拉尔
Konteyner ID:
{info.markerData.id}
Şehir：
{info.markerData.city}
İlçe：
{info.markerData.district}
马哈列：
{info.markerData.street}
地址：
{info.markerData.address}
比尔吉尔：
{info.markerData.info}
props.navigation.navigate（'MarkerEdit'{
id:info.markerData.id，
地址：info.markerData.address，
街道：info.markerData.street，
地区：info.markerData.district，
城市：info.markerData.city，
国家：info.markerData.country，
信息：info.markerData.info，
纬度：info.markerData.latitude，
经度：info.markerData.longitude，
})}>
{console.log（'right button'）}>
);
}

最后一个编辑标记：

import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, SafeAreaView, ScrollView } from 'react-native';
import MapView from 'react-native-maps';

const MarkerEdit = (props) => {

    const { state } = props.navigation;
    console.log(state.params)

    const info = {
        markerData: {
            id: state.params.id,
            adress: state.params.adress,
            street: state.params.street,
            district: state.params.district,
            city: state.params.city,
            country: state.params.country,
            info: state.params.info,
            latitude: state.params.latitude,
            longitude: state.params.longitude,
        },
        mapData: {
            latitude: state.params.latitude,
            longitude: state.params.longitude,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
        },
    };
    return (
        <ScrollView style={styles.container}>
            <View style={styles.formRow}>
                <View style={styles.formColumn}>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.id.toString()}
                            placeholderTextColor="#003f5c"
                            editable={false}
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.city}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.street}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                </View>
                <View style={styles.formColumn}>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.info}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.district}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.adress}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                </View>
            </View>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 }}>
                <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
                <View>
                    <Text style={{ color: '#003f5c', width: 150, textAlign: 'center', fontWeight: 'bold', letterSpacing: 1, fontSize: 18 }}>SÜRÜKLE VE KONUM SEÇ</Text>
                </View>
                <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
            </View>
            <View style={styles.mapContainer}>
                <View style={styles.mapView}>
                    <MapView
                        style={styles.map}
                        initialRegion={{
                            latitude: info.mapData.latitude,
                            longitude: info.mapData.longitude,
                            latitudeDelta: 0.0015,
                            longitudeDelta: 0.0015
                        }}
                    >
                        <MapView.Marker
                            key={state.params.id}
                            draggable
                            coordinate={{
                                latitude: info.markerData.latitude,
                                longitude: info.markerData.longitude
                            }}
                            title={info.markerData.location}
                            description={info.markerData.comments}
                            onDragEnd={(e) => {
                                info.markerData.latitude = e.nativeEvent.coordinate.latitude;
                                info.markerData.longitude = e.nativeEvent.coordinate.longitude;
                                console.log("New" + info.markerData.latitude + "...." + info.markerData.longitude)
                            }
                            }
                        >
                        </MapView.Marker>
                    </MapView>
                </View>
            </View>
        </ScrollView>

    );
}

import React，{useState}来自“React”；
从“react native”导入{样式表、视图、文本、文本输入、安全区域视图、滚动视图}；
从“react native maps”导入MapView；
常量标记编辑=（道具）=>{
const{state}=props.navigation；
console.log（state.params）
常数信息={
markerData：{
id:state.params.id，
地址：state.params.address，
街道：state.params.street，
地区：state.params.district，
城市：state.params.city，
国家：state.params.country，
// MarkerDetail
const { id, address, street... } = props.route.params;