내배캠 TIL 2022.01.09

원격 브랜치 트래킹하는 로컬 브랜치 같은 이름으로 가져오기

$ git checkout -b [생성할 브랜치 명] [원격 브랜치 명]

 

기능 가져올 때 navigation을 구조 분해 할당하고 그 안의 메서드들을 또 구조분해 할당한다. 총 2번 구조 분해 할당

const MainPage = ({ navigation: { goBack, reset, navigate, setOptions } }) => {
  return (
    <View>
   
    </View>
  );
};

  <TouchableOpacity onPress={() => navigate('MainPage')}>
        <Text>메인 페이지로</Text>
      </TouchableOpacity>

 <TouchableOpacity
        onPress={() =>
          reset({
            index: 1,
            routes: [{ name: 'LoginPage' }, { name: 'EditPage' }],
          })
        }
      >
        <Text>Reset Navigation</Text>
      </TouchableOpacity>

 <TouchableOpacity onPress={() => goBack()}>
        <Text>뒤로가기</Text>
      </TouchableOpacity>

 <TouchableOpacity
        onPress={() =>
          setOptions({
            title: '변경된 제목',
          })
        }
      >
        <Text>제목 변경 버튼</Text>
      </TouchableOpacity>

 

 

페이지 하나 당 속성 부여하기 (Screen에 넣어준다)

    <Stack.Screen
        options={{
          headerTintColor: '#24F8DE',
        }}
        name="수정 페이지"
        component={EditPage}
      />

시작할 첫 페이지 설정

전체 속성 부여하기 (Navigator에 넣어준다)

  <Stack.Navigator
      initialRouteName="로그인"
      screenOptions={{
        title: '제목 변경',
      }}
        sceneContainerStyle={{
        backgroundColor: MAIN_COLOR,
      }}
    >

 

Stack 불러와서 쓰는 법

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const Stacks = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="회원가입" component={SignupPage} />
    </Stack.Navigator>
  );
};

export default Stacks;

Tab도 사용방법 다 똑같은데 처음 불러오는 코드

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const Tabs = () => {
  return (
    <Tab.Navigator >
      <Tab.Screen name="메인 페이지" component={MainPage} />
    </Tab.Navigator>
  );
};

export default Tabs;

 

클릭 시 bottom tab 버튼들 강조해주고 싶어서 상태를 뭘로 주면 되나 구글링

https://github.com/react-navigation/react-navigation/issues/2381

How to used different icon when tabbaricon selected and unselected · Issue #2381 · react-navigation/react-navigation

focused 이용하면 된대

 <Tab.Screen
        options={{
          tabBarLabel: '',
          tabBarIcon: ({ focused }) =>
            focused ? (
              <Entypo name="home" size={25} color="black" />
            ) : (
              <Entypo name="home" size={25} color="lightgrey" />
            ),
        }}
        name="메인 페이지"
        component={MainPage}
      />

 

상현님이 index에서 전체를 다 임포트해서 한꺼번에 export하는 방식을 이용하자고 하셨는데

내가 나름대로 한게 맞는지 모르겠다.

https://leedr0730.medium.com/%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%ED%8C%8C%EC%9D%BC-export-%ED%95%98%EA%B8%B0-index-js-%EC%82%AC%EC%9A%A9-2e698a8e2cbd

디렉토리 파일 export 하기 (index.js 사용)

보안과 보기에 깔끔하라고 쓰는 방식인듯 하다.

내가 따라한 코드

 

import SignupPage from './SignupPage';
import MyPage from './MyPage';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
import EditPage from './EditPage';

export { SignupPage, MyPage, MainPage, LoginPage, EditPage };

 

 

내가 하고 싶은 것은 

로그인, 회원가입에서 빠져나와서 메인 페이지로 가면 로그아웃을 하지 않는 한 뒤로 가기를 해도 로그인, 회원가입 페이지로 안 가졌으면 좋겠다. 그전 페이지 기록을 reset 하고 싶은데, tab으로 넘어가면서 stack의 기록을 reset하는 방법을 모르겟다. 구글링 해봤는데 코드를 이렇게 저렇게 쓰라는데 봐도 잘 이해가 안된다. 튜터님한테 물어봐야지.

https://www.reactnativeschool.com/reset-stack-inside-tab-after-leaving-tab

React Navigation v5: Reset Stack Inside Tab After Leaving Tab

이 코드가 내가 하려는 방식과 비슷 한것 같은데 이해가 잘 안된다.