[전기차 충전소 찾기 앱/ReactNative] 서치바 지역 검색

현재 앱은 내가 있는 위치를 중심으로 검색이 된다.

​

상단의 서치바를 검색할 경우 그 지역의 위도 경도를 얻어서 그 지역 위치로 검색되게 한다.

​

우선 SearchBar 에 자동으로 나오는 주소를 클릭시 로케이션이

searchedLocation 으로 저장됨

 

    <View>

      <GooglePlacesAutocomplete

        placeholder="Search"

        fetchDetails={true}

        onPress={(data, details = null) => {

          console.log("위치설정");

          searchedLocation(details?.geometry?.location);

        }}

 

 

​

searchedLocation은 props로 상위 컴포넌트

HomeScreen 에서 가져옴

이때 HomeScreen의 searchedLocation을 이름없는 화살표 함수로 만드는데 이때 (위치)를 입력시 그 위치의 위도 경도를 로케이션에 저장한다. 그러면 로케이션에서 반경 5km으로 충전소를 찾아서 앱의 화면이 재 렌더링 됨.

  return (

    <SelectMarkerContext.Provider value={{ selectedMarker, setSelectedMarker }}>

      <View>

        <View style={styles.headerContainer}>

          <Header />

          <SearchBar

            searchedLocation={(location) =>

              location &&

              setLocation({

                latitude: location.lat,

                longitude: location.lng,

              })

            }

          />