React Native を使用して、IOS モバイル デバイス用のマップ アプリを作成しています。React Natives MapView コンポーネントを使用しており、onPress 関数内で onRegionChange イベントを使用してリージョンを更新しようとしています。これにより、ユーザーがアドレスを入力すると、onRegionChange 内の setState が、入力されたアドレスにマーカーを配置してそのアドレスをレンダリングします。ユーザー。
_addItem 関数の onPress イベント内で on RegionChange 関数を呼び出してみました。this.state.region を this.state.coordinate を使用してマーカーの座標に等しく設定する関数に渡しますが、コンソールでこのエラーが発生し続けます。
エラー:不変であることを意図しており、凍結されているオブジェクト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);