리액트 네이티브 사주 어플 개발 시작 - (1) 홈 바 만들기

사주 어플 개발할건디용

전 이걸로 성공할거예요!! *^__^*.        

 

리네 초보이고 기능이 간단하기 때문에 다양한 기능을 구현한 블로그 중에 원하는 것만 뽑아내야 했다. 

 

[ 참고 블로그 ] 

 

https://velog.io/@xedni/Rroject-MarketKurly-APP-%ED%81%B4%EB%A1%A0%ED%95%98%EA%B8%B0

React Native로 실제 서비스를 100% 구현 해보자 (1)

https://devbksheen.tistory.com/entry/React-Navigtion%EC%9D%98-Header-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0

React Navigtion의 Header 커스텀하기

 

일단 그 헤더부터 만들어볼까요오!!! 

 

아래 블로그를 참고해봤을 땐 헤더 방식이 2가지가 있는데 Stack.Screen 과 UseEffect Hook 이 있다고 한다. 

흠... 여기선 이제 선택을 해야 하는데 뭐가 좋을 지 좀 알아봤다. 

 

1 . Stack.Screen 사용 

 

 

 

2 . useEffec() 사용   

https://xiubindev.tistory.com/100

React Hooks : useEffect() 함수

 

 

Navigation 설치 *App 루트에 설치해야 한다. 첨엔 홈에서 설치했다가 에러 뜨길래 ㅠㅠㅠ

https://hellominchan.tistory.com/4

[React Native] React Navigation 설치 및 사용법

 

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

 

 

 

 

 

 

 

왼쪽 그림처럼 상단홈을 만들기 위해서는 상당히 많은 에러를 만나야 했다..................

android - app - build.gradle 도 고치고 MainActivity 도 고치고 (챗지피티 도움 받음) 

npm 설치 및 임포트, 오버라이드 등등 진행해주어야 함 Navigation 땜시.... 

 

 

 

 

 

App.tsx 

// import React from "react";
// import {View, Text} from "react-native";
import HomeScreen from './screens/HomeScreen';
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";

const Stack = createStackNavigator();

const App = () => {
    return <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen}/>
        </Stack.Navigator>
    </NavigationContainer>;
};

export default  App;

 

HomeScreen.js 

import React  from 'react';
import {Button, View} from 'react-native';


function HomeScreen({navigation}) {

    return (
        <View>
            <Button title={"Home"} />
        </View>
    );
}

export default  HomeScreen;

 

*설정 바꾸면 서버 재실행 잊지 말자!!