재우니의 블로그

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



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