심재운 블로그

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 을 작성한 다음 전송하면 아이폰에서 제목과 내용이 제공됩니다. 카운트도 인위적으로 표기도 가능합니다.



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



이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 궁금증
    궁금한게 있습니다.

    해당 예제의 경우,
    expo 앱으로 스캔한 앱으로는 실행이 안되는 것인가요?
    2019.07.17 14:56