구글 주소 검색이 되질 않습니다.

god972 · 1월 29, 2019, 7:02오전

해당 코드 입니다.

import React, { Component } from "react";
import { Text, View, StyleSheet, Platform, TextInput } from "react-native";
import { MapView } from "expo";
import _ from "lodash";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: "",
      latitude: 0,
      longitude: 0,
      destination: "",
      predictions: [],
      key: "AIzaSyCEhbIE6NZeTAnzYM6MVtslwvUDxi1qXUg"
    };
    this.onChangeDestinationDebounced = _.debounce(
      this.onChangeDestination,
      1000
    );
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        });
      },
      error => this.setState({ error: error.message }),
      { enableHighAccuracy: true, maximumAge: 2000, timeout: 20000 }
    );
  }

  async onChangeDestination(destination) {
    this.setState({ destination });

    const apiUrl =
      "https://maps.googleapis.com/maps/api/place/autocomplete/json?key=${this.state.key}&input=${destination}&location=${this.state.latitude},${this.state.longitude}&radius=2000";
    try {
      const result = await fetch(apiUrl);
      const json = await result.json();
      console.log(json);
      this.setState({
        predictions: json.predictions
      });
    } catch (err) {
      console.error(err);
    }
  }

  render() {
    const predictions = this.state.predictions.map(prediction => (
      <Text style={styles.suggestions} key={prediction.id}>
        {prediction.destination}
      </Text>
    ));
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          region={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121
          }}
          showsUserLocation={true}
        />
        <TextInput
          style={styles.destinationInput}
          placeholder="search"
          value={this.state.destination}
          onChangeText={destination => {
            this.setState({ destination });
            this.onChangeDestinationDebounced(destination);
          }}
        />
        {predictions}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  suggestions: {
    backgroundColor: "white",
    padding: 5,
    fontSize: 18,
    borderWidth: 0.5,
    marginLeft: 5,
    marginRight: 5
  },
  destinationInput: {
    height: 40,
    borderWidth: 0.5,
    marginTop: 50,
    marginLeft: 5,
    marginRight: 5,
    padding: 5,
    backgroundColor: "white"
  },
  container: {
    ...StyleSheet.absoluteFillObject
  },
  map: {
    ...StyleSheet.absoluteFillObject
  }
});

데이터가 터미널 창에서는 보여지는데 앱화면에서는 보여지질 않습니다…

어떻게 바꾸어야 해당 화면을 볼 수 있을까요?
터미널에서는 TextInput에 내용을 넣으면 그 키워드에 맞는 장소가 데이터로 표시 됩니다 그런데
아래 사진에 보는 것처럼 목록에는 하얗게 표시만 되고 내용이 아무것도 뜨지 않습니다.

codejong · 1월 29, 2019, 11:03오후

위 글에서 설명은 단지 위 내용 뿐입니다.

사람들이 직접 돌려보기 전에도 해당 설명만 보고도 어떤 코드이고 어떤 부분에서 문제인지 쉽게 알 수 있도록 더 자세히 설명해주세요~

god972 · 1월 30, 2019, 5:52오전

설명 추가하였습니다.

codejong · 1월 30, 2019, 1:34오후

5개 빈칸이 추가되었는데 텍스트가 안나오고 있다는 상황인가 보군요. 아마 destination이라는 속성이 없거나 text 색이 똑같이 하얀색 아닐까요?
관련 api에는 destination라는 속성은 없고 description 속성이 있는데 혹시 잘못 쓰신건 아닌가요?

터미널에 로그 찍으면 나온다고 하셨는데 다음에 질문할때는 확인하신 로그 내용등도 같이 알려주시면 더 정확한 답변을 들을 수 있을거에요.

god972 · 1월 31, 2019, 5:28오전

영상예제를 따라했는데 안되서 react-native-google-places-autocomplete 로 바꿔서 해결했습니다…