0
私はReact Nativeを使用してIOSモバイル用のマップアプリケーションを作成しています。私はReact Natives MapViewコンポーネントを使用しています。ユーザーが住所を入力すると、onRegionChange内のsetStateはその住所を、ユーザー。onPressイベントを使用してReact Native Mapviewコンポーネントの領域の状態を更新しようとするとエラーが発生する
私は_addItem関数のonPressイベント内でRegionChange関数を呼び出すことを試みました。私はthis.state.coordinateを使ってマーカーの座標と等しく設定したthis.state.regionを渡しますが、コンソールでこのエラーが発生し続けます：
エラー：キーを設定しようとしましたlatitude不変であり、フリーズされているオブジェクト上の値33.77709834885268である。
また、onMarkerChangeという新しい関数を作って、マーカーの座標でsetStateを呼び出してから、_addItem関数onPress内のonMarkerChange関数を呼び出して、ユーザーが入力した新しいアドレスにマーカを描画しますが、私は領域から外に出て、ユーザーはマーカーを数回クリックして領域にズームインする必要があります。
誰かが自分のコードを見て間違っていることを教えてもらえますか？本当にありがとう！
は、ここに私のコードです：
class Map_app2 extends Component {
constructor(props){
super(props);
this.state = {
region: {
latitude: 33.753746,
longitude: -84.386330,
latitudeDelta: 0.0922,
longitudeDelta: 0.0121
},
coordinate: {
latitude: 33.749249,
longitude: -84.387314,
latitudeDelta: 0.0922,
longitudeDelta: 0.0121
},
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2})
};
this.itemsRef = this.getRef().child('items');
this.onRegionChange = this.onRegionChange.bind(this);
this.onMarkerChange = this.onMarkerChange.bind(this);
}
onRegionChange(region){
this.setState({region});
}
onMarkerChange(coordinate){
this.setState({coordinate})
}
getRef(){
return firebaseApp.database().ref();
}
listenForItems(itemsRef){
itemsRef.on('value', (snap) => {
var items = [];
snap.forEach((child) =>{
items.push({
address: child.val()._address,
_key: child.key
});
console.log(items)
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(items),
});
});
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
render() {
console.log(this.state.region);
console.log(this.state.coordinate)
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
<MapView.Marker
coordinate={{
latitude: this.state.coordinate.latitude,
longitude: this.state.coordinate.longitude
}}
onPress= {() => console.log(this.state.coordinate)}>
</MapView.Marker>
<ActionButton
onPress={this._addItem.bind(this)}
title="Search Address"/>
</MapView>
<ListView
dataSource= {this.state.dataSource}
renderRow= {this._renderItem.bind(this)}
style= {styles.listview}
enableEmptySections={true}>
</ListView>
</View>
);
}
_addItem() {
AlertIOS.prompt(
'Look up address',
null,
[{text: 'Cancel', onPress:() => console.log('Cancel Pressed'),
style:'cancel'},
{
text: 'Enter',
onPress: (value) => Geocoder.geocodeAddress(value).then(res => {
// res is an Array of geocoding object (see below)
this.state.coordinate.latitude = res[0].position.lat
this.state.coordinate.longitude = res[0].position.lng
this.state.region = this.state.coordinate
this.onRegionChange(this.state.region)
this.itemsRef.push({address: res[0].formattedAddress})
})
.catch(err => console.log(err))
}],
'plain-text'
);
}
_renderItem(item) {
const onPress =() => {
AlertIOS.prompt(
'Edit or Delete Item',
null,
[
// {text: 'Edit', onPress: (text) =>
this.itemsRef.child(item._key).update({address: this.state.region})},
{text: 'Delete', onPress: (text) =>
this.itemsRef.child(item._key).remove()},
{text: 'Cancel', onPress: (text) => console.log('Cancelled')}
]
);
};
return (
<ListItem item={item} onPress={onPress} />
);
}
}
AppRegistry.registerComponent('Map_app2',() => Map_app2);