본문 바로가기
개발/expo

[expo] 12. expo로 앱 만들기 - asyncStorage 정보 가져오기

by angelpsyche 2023. 4. 15.

안녕하세요 프시케입니다.

 

이번 포스팅은 저번 포스팅에 이어 다른 화면에서 접근 토큰을 asyncStorage에 가져오기입니다. 

 

회원가입 화면에서 코드를 만들어 보았습니다. 

 

signup.js 전체 코드입니다.  

 

import React, { useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useNavigation } from "@react-navigation/native";
import AsyncStorage from '@react-native-async-storage/async-storage';

const Signup = () => {

  const navigation = useNavigation();

  useEffect(() => {

    async function getData() {
      try {
        const value = await AsyncStorage.getItem('userAccessToken')
        if(value !== null) {
          console.log(value);
        }
      } catch(e) {
        console.log('error', value);
      }
    }
    getData();
  },[]);

  return (
    <View style={Styles.container}>      
      <Text style={Styles.HomeText}>회원가입 화면</Text>
      <TouchableOpacity
          onPress={() => navigation.navigate( "Home", { screen: "Home"} )}
          style={Styles.NextBottom}
        >
          <Text style={Styles.BottomText}>홈 화면으로</Text>
        </TouchableOpacity>
    </View>
  )
}

export default Signup;

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 24,
    backgroundColor: '#fff',
  },
  HomeText: {
    marginTop: 100,
    fontSize: 30,
    textAlign: "center",
  },
  NextBottom: {
    backgroundColor: "purple",
    padding: 10,
    marginTop: "20%",
    width: "50%",
    alignSelf: "center",
    borderRadius: 10,
  },
  BottomText: {
    fontSize: 15,
    color: 'white',
    textAlign: "center",
  }
})

 

 

valueconsole.log로 찍어보면 접큰 토큰을 확인할 수 있습니다.