젊은 웹 개발자들은 웹을 이해한다.그들은 무수한 시간을 써서 텔레비전 프로그램과 배우 라인업을 만들었다.그들은 이미 자바스크립트, Python, Golang, Fortran, Basic 등으로 무수한 대기 응용 프로그램을 개발했다...네 말이 맞다!
하지만 이 핫한 개발자는 익숙하지 않은 분야를 정복하고 싶어 한다.그들은 팀의 모바일 개발자들을 대체하려고 한다.힙합의 새로운 프레임워크를 사용함으로써 이 모든 것이 로컬입니다.그들은 이것이 사실상 간단한 웹 응용 프로그램을 작성하는 것과 같다고 생각해서 React Native CLI를 설치하고 빈 프로젝트를 구축했다.
처음부터 좋았어.그들은 div가 아니라 보기를 만들어야 한다는 것을 발견했다.텍스트를 만들기 위해서는 내장된 텍스트 구성 요소를 사용해야 합니다.CSS 대신 인라인 JavaScript 스타일을 사용해야 합니다.좋은 레이아웃을 만들기 위해서는 flexbox 지식이 필요합니다.
그러나 그들은 지리적 위치추적, 오디오 입력, 알림 전송 등 더욱 강력한 기능을 사용하기를 원한다.그들은 이러한 기능을 사용하기 위해서 XCode를 열고 상당히 상세한 프로필을 편집하고plist를 변경하며 Objective-C에서 헤더 파일을 만들고 실현해야 한다는 것을 발견했다. 아마도 웹을 계속 사용해야 할 것이다.

엑스포에 들어가다

다행히도atExpo의 예쁜 팀은 기능이 강한 SDK를 만들어 React 로컬 개발자들의 체험을 크게 개선했다.Expo로 프로그램을 만들 때 XCode를 열거나 플랫폼에 특정한 프로필을 편집할 필요가 없을 수도 있습니다.
react 웹 응용 프로그램을 유도하는createreact 응용 프로그램에 익숙하면 Expo의 작업 방식은 기본적으로 같습니다.명령줄에서 실행exp init <project-name>하고 프로젝트 디렉터리를 입력하고 exp start 를 사용하면 됩니다.엑스포는 장치에서 항목을 볼 수 있는 QR 코드를 제공합니다.또한 exp ios 또는 exp android 를 사용하여 시뮬레이터를 실행할 수 있습니다.두 번의 저장 사이에서 시뮬레이터는 속도가 좀 빠르지만 실제 장치보다 성능이 떨어진다.

에스프레소

그것은 마치 expedia커피 같다.아니면 비슷한 거.이 응용 프로그램은 상위 계층에서 다음과 같이 표시됩니다.

사용자의 위치가 중간에 있는 지도 보기가 있습니다

지도에 부근의 커피와 찻집의 위치를 표시하는 표시가 있다

우리는 Yelp API를 사용하여 카페 목록을 얻을 것이다.그들의 API 설정과 사용은 매우 간단하다. Yelp 등록으로 돌아가서 응용 프로그램을 만들기만 하면 된다.

새 항목 만들기

인코딩을 시작합시다.expocli 설치부터 시작합니다.

npm install -g exp

그런 다음 실행

exp init espressopedia

빈 템플릿 항목을 설정할 것인지 또는 시작 파일 (예: 탭 탐색기) 이 있는 항목을 설정할 것인지 묻습니다.나는 어떤 옵션 카드도 내비게이션을 필요로 하지 않기 때문에 공백 항목을 선택했다.
이제 iOS 시뮬레이터에서 이 프로그램을 테스트할 것입니다.당신도 자신의 장치를 사용할 수 있지만, expo 클라이언트를 다운로드하고 설정하는 것은 당신에게 달려 있습니다.에뮬레이터를 실행하려면:

exp ios

# or for Android

exp android

이 프로젝트를 건설하다

exp start

이제 루트 디렉터리를 열면 빈 템플릿 App.js 파일을 찾을 수 있습니다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

만약 당신이 React의 베테랑이라면, 이 파일은 보기에 그리 무섭지 않을 것이다.View 및 Text 태그의 사용법을 주의하십시오.이 파일은 StyleSheet 을 사용하지만, 스타일을 일반 대상으로 정의할 수도 있습니다.

지도 를 세우다

우리가 탐색할 첫 번째 expo API는 MapView 구성 요소입니다.

// app/components/Map.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { MapView } from 'expo';

const Marker = MapView.Marker;

export default class Map extends Component {
  renderMarkers() {
    return this.props.places.map((place, i) => (
      <Marker 
        key={i}
        title={place.name}
        coordinate={place.coords}
      />
    ));
  }

  render() {
    const { region } = this.props

    return (
      <MapView
      style={styles.container}
      region={region}
      showsUserLocation
      showsMyLocationButton
      >
        {this.renderMarkers()}
      </MapView>
    );
  }
}

const styles = {
  container: {
    width: '100%',
    height: '80%'
  }
}

이 지도 부품은 엑스포 MapView 부품의 포장기이다.포장 내장 구성 요소를 선택하면 라이프 사이클 방법과 응용 프로그램에 특정한 방법(예를 들어 렌더링 표시)을 통해 기능으로 지도를 장식할 수 있습니다.여기에서 카페를 찾는 용례를 겨냥한 것이 아니다. 이 결정은 카페를 보여주는 App.js 구성 요소에서 나온 것이다.

// App.js
import React from 'react';
import { Text, SafeAreaView } from 'react-native';
import Map from './app/components/Map'

// A placeholder until we get our own location
const region = {
  latitude: 37.321996988,
  longitude: -122.0325472123455,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421
}

export default class App extends React.Component {
  state = {
    region: null
    coffeeShops: []
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Map
          region={region}
          places={this.state.coffeeShops}
        />
      </SafeAreaView>
    );
  }
}

여기서 우리는 지도를 쿠비티노 주위 어딘가에 놓아야 하는 초기 구역의 대상을 전달한다.사용자 위치를 지도 보기의 중심으로 설정할 때, 우리는 그것을 바꿀 것이다.우리는 또한 SafeAreaView 를 최고급 구성 요소로 사용한다.아이폰 X의 이상한 화면 영역에서도 우리의 내용이 좋아 보인다.

사용자 위치 가져오기

사용자 위치를 얻기 위해 우리는 expo에서 Location 및 Permissions 모듈을 사용할 수 있습니다.추가 App.js

// App.js
/* ... */
import { Location, Permissions } from 'expo'

const deltas = {
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421
};

export default App extends Component {
  state = {
    region: null,
    coffeeShops: []
  };

  componentWillMount() {
    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({});
    const region = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      ...deltas
    };
    await this.setState({ region });
  }

    render() { /* ... */ }
}

여기에서 우리는 응용 프로그램을 설치할 때 사용자가 지리적 위치를 사용할 수 있는 권한을 확보해야 한다.만약 그들이 거절한다면, 우리는 오류 메시지를 상태로 설정하고, 이 메시지를 지도가 아니라 표시할 수 있습니다.권한이 부여되면, 우리는 getCurrentPositionAsync 을 호출할 수 있으며, 이것은 우리가 필요로 하는 것보다 약간 복잡한 위치 대상을 되돌려준다. 따라서 우리는 우리가 원하는 속성, 즉 위도와 경도 (그리고 삼각주를 얻을 수 있으며, 우리의 지도가 얼마나 축소될지 알 수 있도록) 를 얻을 수 있다.

데이터 가져오기

우리의 카페 데이터를 얻기 위해서, 우리는 Yelp API를 조회할 것이다.Yelp에 응용 프로그램을 설치하는 것은 매우 간단합니다. 로그인하고 이동하기만 하면 됩니다 Manage App.여기서 API 키를 얻을 수 있습니다. API를 사용할 수 있습니다.
웹에서처럼 우리는 axios 라이브러리를 이용하여 HTTP 요청을 실행할 수 있다.계속 뛰어.

npm install --save axios

현재 모듈화를 위해 앱 디렉터리에 services 라는 새 폴더를 추가하고 이 폴더에 yelp.js 라는 파일을 추가합니다.여기서 응용 프로그램이 Yelp의 API 인터페이스와 어떻게 연결되는지 정의합니다.

// app/services/yelp.js
import axios from 'axios';

const YELP_API_KEY = '<YOUR_API_KEY>';

const api = axios.create({
  baseURL: 'https://api.yelp.com/v3',
  headers: {
    Authorization: `Bearer ${YELP_API_KEY}`
  }
});

const getCoffeeShops = userLocation => {
  return api
    .get('/businesses/search', {
      params: {
        limit: 10,
        categories: 'coffee,coffeeroasteries,coffeeshops',
        ...userLocation
      }
    })
    .then(res =>
      res.data.businesses.map(business => {
        return {
          name: business.name,
          coords: business.coordinates
        };
      })
    )
    .catch(error => console.error(error));
};

export default {
  getCoffeeShops
};

이 서비스는 axios.create를 사용하여 http 클라이언트를 만들고 전달baseURL과 Authorization 헤더를 통해 작동합니다.그리고 Yelp api를 조회하기 위해 검색 매개 변수가 있는 GET 요청을 https://api.yelp.com/v3/businesses/search 로 보낼 수 있습니다.Axios는 매개 변수를 매개 변수 목록의 대상으로 설정하여 이 과정을 간소화할 수 있도록 합니다.그 후에 이 getCoffeeShops 방법 중 유일하게 응용 프로그램에 대한 유일한 부분은 우리가 요청에서 지정한 것이다 categories.우리는 그것을 채식주의자나 햄버거로 바꿀 수 있다. 이것은 우리의 지도의 결과를 완전히 바꿀 것이다.대다수의 경우.
이제 Yelp Service 가져오기부터 내부App.js에서 이 서비스를 사용합니다.

// App.js
/* ... */
import YelpService from './app/services/yelp'

export default App extends Component {

  /* ... */

  getCoffeeShops = async () => {
    const { latitude, longitude } = this.state.region;
    const userLocation = { latitude, longitude };
    const coffeeShops = await YelpService.getCoffeeShops(userLocation);
    this.setState({ coffeeShops });
  };

  getLocationAsync = async () => {

    /* ... */

    // Add this line!
    await this.getCoffeeShops();
  }

  render() {
    const { region, coffeeShops } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <Map region={region} places={coffeeShops} />
      </SafeAreaView>
    );
  }
}

지금 우리는 장사를 하고 있다!너는 표시된 지도와 너의 위치를 볼 수 있을 것이다.네가 시뮬레이터에 있지 않으면그리고 샌프란시스코 어딘가에 있는 걸 알게 될 거야.엑스포 팀이 거기서 일하는지 알고 싶습니다.

나는 네가 이 문장에서 즐거움을 얻을 수 있기를 바란다. 그것은 네가 더욱 멋진 것을 하도록 격려할 수 있기를 바란다.내가 이 글을 준비하는 과정에서 나는 유사한 응용 프로그램을 만들었고, 심지어 필터 단추도 있었다.그 중 하나는 스타벅스입니다. 당신이 모든 것을 찾지 못할 경우를 대비해서 알고 있습니다.관심이 있으시면 이 코드here를 보십시오.
이것은 나의 첫 번째 게시물이기 때문에, 나는 평론, 건의, 비판에 매우 감사한다.이것은 참여도를 불러일으키고 미래의 직위를 더욱 잘 확보할 것이다.
다음까지.