expo 에서 push notifications tool 활용하기

expo 에서 push notifications tool 을 온라인 화면에서 제공해 주는데요.

https://expo.io/dashboard/notifications

해당 툴을 테스트로 사용할 땐, push 의 token 값은 애뮬레이터에서 얻을 수 없고 꼭 안드로이드나 아이폰 기기에서 얻을 수 있습니다. 

import React, { Component } from 'react';

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

import Expo from 'expo';

import { TextInput } from 'react-native-gesture-handler';

//var { ivalue } = "";

async function getToken() {

//원격지 알람은 기기에서만 된다.

if(!Expo.Constants.isDevice){

return;

}

let { status } = await Expo.Permissions.askAsync(

Expo.Permissions.NOTIFICATIONS

);

if(status != 'granted'){

console.log("설정에서 알람 활성화 필요");

return;

}

//push 이후에 반환받은 값 담기

let value = await Expo.Notifications.getExpoPushTokenAsync();

console.log('토큰값 ', value);

alert(value);

}

export default class App extends React.Component {

state = {

tokenValue : ""

};

componentDidMount(){

getToken();

this.listener = Expo.Notifications.addListener(this.handleNotification);

}

componentWillUnmount(){

this.listener && this.listener.remove();

}

handleNotification = ({ origin, data }) => {

console.log(

`push notificaton ${origin} with data : ${JSON.stringify(data)}`

);

};

render() {

const { tokenValue } = this.state;

return (

<View style={styles.container}>

<Text style={styles.paragraph}>notification test</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

paragraph : {

margin : 24,

fontSize : 18,

fontWeight : 'bold',

textAlign : 'center',

color : '#34495e'

}

});

push notification tool 을 작성한 다음 전송하면 아이폰에서 제목과 내용이 제공됩니다. 카운트도 인위적으로 표기도 가능합니다.

자세한 건 여기 동영상을 보시면서 따라 하시면 됩니다.