React-Native-maps如何在MapView中更新区域?

Question

我实现了一个函数，当在搜索屏幕上找到标记时，将标记的编号移动到该位置。当我按下主屏幕上的按钮(Button.showSpecificMarker)时，我想只打印某些标记。

然而，当我按下按钮时，只打印某些标记，但它移动到最后搜索的区域，而不是我正在查看的区域。

MainScreen.js

import { StyleSheet, Image, View, Text, TouchableOpacity, Button } from 'react-native';
import { Icon } from 'native-base'; // 추가된 코드
import { withNavigation, navigation } from 'react-navigation';
import MapView, { Marker, PROVIDER_GOOGLE, MAP_TYPES } from 'react-native-maps';
import iksonData from './ikson.json';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'white' },
text: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
iconImg: {
width: 30,
height: 30,
padding: 10,
marginLeft: 5,
}
});
function MapScreen(props) {
const [region, setRegion] = useState({
latitude: 35.962691,
longitude: 126.97894,
latitudeDelta: 0.0322,
longitudeDelta: 0.0321,
});
const [findRegion, setFindRegion] = useState({
latitude: null,
longitude: null,
latitudeDelta: null,
longitudeDelta: null,
});
const [showVehicleReader, setShowVehicleReader] = useState(-1);
const [btnTitle, setBtnTitle] = useState('차량용 판독기만 보기');
const new_region = props.navigation.getParam('region');
let markers;
const handleBtnPress = () => {
setShowVehicleReader((showVehicleReader === -1) ? 0 : -1);
setBtnTitle((btnTitle === '차량용 판독기만 보기') ? '전체 보기' : '차량용 판독기만 보기');
}
//  -1은 전체 0은 차량용 판독기만, 1은 차량용 판독기 제외
if (showVehicleReader === 1) {
markers = <View>
{iksonData.map((item) =>
(item.purpose !== '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
}}
/>
:
null
)}
</View>
} else if (showVehicleReader === 0) {
markers = <View>
{iksonData.map((item) =>
(item.purpose === '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
}}
pinColor={'blue'}
/>
:
null
)}
</View>
} else {
markers = <View>
{iksonData.map((item) =>
(item.purpose === '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
}}
pinColor={'blue'}
/>
:
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
}}
/>
)}
</View>
}
//rendering!!!
return (
<View style={styles.container}>
<MapView
style={{ flex: 1 }}
zoomEnabled={true}
provider={PROVIDER_GOOGLE}
mapType="hybrid"
minZoomLevel={13}
maxZoomLevel={19}
initialRegion={
{
latitude: 35.962691,
longitude: 126.97894,
latitudeDelta: 0.0322,
longitudeDelta: 0.0321,
}
}
region={new_region || region}
>
{markers}
</MapView>
<View>
<Button
class='showSpecificMarker'
title={btnTitle}
color="#f194ff"
onPress={handleBtnPress}
/>
</View>
</View>
);
}
// navigationOptions 코드 추가
MapScreen.navigationOptions = ({ navigation }) => {
return {
headerLeft: () => <Image source={require('./assets/logo.jpg')} style={styles.iconImg} />,
title: <Text style={styles.text}>9585부대 CSMap</Text>,
headerRight: () =>
(
<TouchableOpacity onPress={() => navigation.navigate('Search')}>
<Icon name='ios-search' style={{ paddingRight: 10 }} />
</TouchableOpacity>
),
headerTitleAlign: 'center',
}
}
export default withNavigation(MapScreen);

SearchScreen.js

// https://aboutreact.com/react-native-search-bar-filter-on-listview/
// import React in our code
import React, { useState, useEffect } from 'react';
// import all the components we are going to use
import { SafeAreaView, Text, StyleSheet, View, FlatList, TouchableOpacity } from 'react-native';
import { SearchBar } from 'react-native-elements';
// 익산 데이터
import iksonData from './ikson.json';
const SearchScreen = (props) => {
const { navigation, route } = props;
const [search, setSearch] = useState('');
//filter했을 때 나오는 리스트
const [filteredDataSource, setFilteredDataSource] = useState([]);
// 아무것도 검색안할 때 나와야되는 전체 리스트
const [masterDataSource, setMasterDataSource] = useState([]);
useEffect(() => {
setFilteredDataSource(iksonData);
setMasterDataSource(iksonData);
}, []);
const searchFilterFunction = (text) => {
// Check if searched text is not blank
if (text) {
// Inserted text is not blank
// Filter the masterDataSource
// Update FilteredDataSource
const newData = masterDataSource.filter(function (item) { //CCTV 카메라 넘버로 검색
const itemData = String(item.id);
const textData = text;
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
} else {
// Inserted text is blank
// Update FilteredDataSource with masterDataSource
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
// flatlist item 부분
const ItemView = ({ item }) => {
return (
// Flat List Item
<Text style={styles.itemStyle} onPress={() => getItem(item)}>
<View style={{ flex: 1}}>
<Text style={{ fontWeight: "bold", paddingTop: 25}}>{item.id + "번 CCTV"}</Text>
<Text style={{ paddingTop: 5}}>{'주소: ' + item.lotAddress}</Text>
<Text style={{ paddingTop: 5}}>{'목적: ' + item.purpose}</Text>
</View>
</Text>
);
};
const ItemSeparatorView = () => {
return (
// Flat List Item Separator
<View
style={{
height: 0.5,
width: '100%',
backgroundColor: '#C8C8C8',
}}
/>
);
};
const getItem = (item) => {
navigation.navigate('Main', {
region:{
latitude:item.latitude,
longitude:item.longitude,
latitudeDelta: 0.0022,
longitudeDelta: 0.0021,
}
})
};

// flatlist의 data는 객체배열
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<SearchBar
round
searchIcon={{ size: 24 }}
onChangeText={(text) => searchFilterFunction(text)}
onClear={(text) => searchFilterFunction('')}
placeholder="보고싶은 CCTV 번호를 입력해주세요."
value={search}
/>
<FlatList
data={filteredDataSource}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
itemStyle: {
padding: 10,
},
});
export default SearchScreen;

我认为它移动到主屏幕MapView中region={new_region||region}搜索的最后一个地方。那么我怎样才能按下按钮进入我现在正在观看的区域呢?

=======

在这里输入链接视频

Answer 1

希望你做得好。

这是你可以尝试的更新代码

componentDidMount() {
this._getLocationAsync();
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: 'Permission to access location was denied',
});
}
let location = await Location.getCurrentPositionAsync({});
this.setState({ location });
this.setState({
region: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.003,
longitudeDelta: 0.003,
},
});
}

state = {
location: null,
region:null,
errorMessage: null,
marker: {latitude: 0,longitude: 0},
};
<MapView style={styles.map}
showsUserLocation = {true}
onRegionChange={this.onRegionChange.bind(this)}
region={this.state.region} >
<MapView.Marker
coordinate={this.state.marker}
title={"title"}
description={"description"}/>
</MapView>

希望这对你有帮助，如果你有任何疑问，请随时问我。