[RN]기본 로그인 구현(1)

유튜브 영상을 보면서 따라했습니다.

 

 

React Navigation 홈페이지

https://reactnavigation.org/docs/getting-started/

일단 네비게이션 패키지(?) 설치

 

npm install @react-navigation/native

 

expo install react-native-screens react-native-safe-area-context

 

npm install @react-navigation/native-stack

 

순서대로 install 하시면 됩니다!!!
정확한 사용법은 DOC 참고 하시면 되는데 저도 몰라요...

 

점점 하면서 배워 나가야지 처음부터 문법 이유부터 찾으면 힘들더라고요

 

expo install firebase

 

요거는 fb(firebase)와 연동을 위해서 install 하는 것 같습니다.

 

 

Home.js

Login.js

 

두 파일을 만들어 줍니다.

그 안에 파일은 일단 아래 코드처럼 채워줍니다.

 

vs code에서 ES7이라고 치면 나오는 패키지(?)들이 있는데

예를들어 rcef 라고 치면 아래 코드들을 만들어주는데

이걸 snippets라고 하는 것 같습니다.

(요거는 틀릴수도?)

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

const HomeScreen = () => {
    return (
      <View>
        <Text> textInComponent </Text>
      </View>
    )
}

export default HomeScreen

const styles = StyleSheet.creat({})

 

App.js에서

<Stack.Navigator>을 쓰면 지금 내가 어느 페이지에 있는지 위에 네비게이션 바가 뜹니다.

근데 이걸 지워야겠죠???

 

그러면 앞서 설명한적이 한 번 있는데 옵션에 넣으면 됩니다.

 

<Stack.Navigator>
<Stack.Screen options={{ headerShown: false }} name="Home" component={HomeScreen} />
</Stack.Navigator>

 

 쉽죠???

 

---

Error가...

 

알고보니 import를 제대로 안해줬네요

그리고 솔직히 잘 모르겠습니다.

 

import랑 ;를 잘 찾아봤는데...

식은땀 흐르네요

LoginScreen만 30분 넘게 오류...

짜증나서 책상을 내리침...

이건 아니다

하...

 

알고보니 유튭이랑  하나하나 비교해보니까

그놈의 import 문제

 

아니 누구 자동으로 import 해주는데 거기서 오류가 있을꺼라 상상이나 하는지...

진짜 RN는 ios랑 android로 갈아타는 순간 다시는 보고 싶지 않음

 

from 'react-native'입니다