我正在尝试使用select动态设置组件中的半径值。当我将初始值设置为“500”并更改为“1000”时,圆的半径会改变,但是当我再次选择“500”时,没有任何变化。
此外,我如何控制地图的缩放值,以便如果选择10km 的半径,则圆形组件适合屏幕?
代码:
import React, { useState } from 'react';
import {View, Text, StyleSheet, SafeAreaView, Image } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import {Picker} from '@react-native-community/picker';
import marker from '../assets/icons8-marker.png';
const LocationSearchScreen = props => {
const locParam = props.navigation.getParam('locParam');
const locParamLat = locParam.location.lat;
const locParamLng = locParam.location.lng;
const [loc, setLoc] = useState({
latitudeDelta: 0.025,
longitudeDelta: 0.025,
latitude: locParam ? locParamLat : 28.6466773,
longitude: locParam ? locParamLng : 76.813073
});
const [radius, setRadius] = useState(500);
const regionChangeHandler = (region ) => {
setLoc(region);
}
const radiusChangeHandler = (rad) => {
setRadius(rad);
}
return(
<View style={styles.screen}>
<MapView
initialRegion={loc}
onRegionChangeComplete={regionChangeHandler}
style={styles.map}
>
<MapView.Circle
key = { (loc.latitude + loc.longitude).toString() }
center = { {
latitude: loc.latitude,
longitude: loc.longitude
} }
radius = { radius }
strokeWidth = { 1 }
strokeColor = { '#1a66ff' }
fillColor = { 'rgba(230,238,255,0.5)' }
//onRegionChangeComplete = { regionChangeHandler }
/>
</MapView>
<View style={styles.markerFixed}>
<Image style={styles.marker} source={marker} />
</View>
<SafeAreaView style={styles.locFooter}>
{/*===== Radius Container Start =====*/}
<View style={styles.radContainer}>
<Text style={styles.radTitle}>Radius:</Text>
<View style={styles.radBtnContainer}>
<Picker
selectedValue={radius}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>{
let itemValueNum = Number(itemValue);
radiusChangeHandler(itemValueNum)
}}
>
<Picker.Item label="500m" value="500" />
<Picker.Item label="1Km" value="1000" />
<Picker.Item label="2Km" value="2000" />
<Picker.Item label="5Km" value="5000" />
<Picker.Item label="10Km" value="10000" />
</Picker>
</View>
</View>
{/*==== Radius Container End ====*/}
</SafeAreaView>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1
},
map: {
width: '100%',
height: '80%'
},
markerFixed: {
left: '50%',
marginLeft: -24,
marginTop: -48,
position: 'absolute',
top: '40%'
},
marker: {
height: 48,
width: 48
},
locFooter: {
backgroundColor: 'rgb(255, 255, 255)',
bottom: 0,
position: 'absolute',
width: '100%',
padding: 15,
},
radContainer: {
flex: 1,
marginBottom: 10
},
radTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 5
},
radBtnContainer: {
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
flexWrap: 'wrap'
}
})
export default LocationSearchScreen;