React-Navigation 사용법

1. Header를 가리고 싶을 때

screenOptions={{headerShown: false}} 를 적어줍니다.

const LoginNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen options={{headerShown: false}} 
		name="SignIn" component={SignIn} />
      <Stack.Screen name="Signup" component={SignUp} />
      <Stack.Screen name="changePswd" component={changePswd} />
    </Stack.Navigator>
  );
};

 

2. 특정 페이지에서 내비게이션을 가리고 싶을 때

const NoticeList = ({navigation}) => {
...

useEffect(() => {
    const parent = navigation.dangerouslyGetParent();
    parent.setOptions({
      tabBarVisible: false,
    });
    return () =>
      parent.setOptions({
        tabBarVisible: true,
      });
  }, []);
})

가리고 싶은 js(tsx)에 useEffect를 사용하여 내비게이션을 가려줍니다.

 

https://stackoverflow.com/questions/51352081/react-navigation-how-to-hide-tabbar-from-inside-stack-navigation

React Navigation how to hide tabbar from inside stack navigation

이 코드는 자식 요소까지 영향을 줍니다.

즉 1depth에서 내비게이션을 가렸다면 2depth에서 굳이 같은 코드를 쓰지 않아도 저절로 가려집니다. 그러므로 자식 요소에서 내비게이션을 다시 보여주고 싶다면 visibled을 true로 해줄 필요가 있습니다.

 

 

3. 페이지간 이동 방법

 

<stack.Navigator>

<stack.screen> ...

으로 라우터를 만들어주면 라우터 내부에서

navigation.navigate 으로 페이지 이동이 가능합니다.

 

라우터

 

const LoginNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{headerShown: false}}
        name="SignIn"
        component={SignIn}
      />
      <Stack.Screen name="회원가입" component={SignUp} />
      <Stack.Screen name="changePswd" component={changePswd} />
      <Stack.Screen name="공지사항" component={Notice} />
    </Stack.Navigator>
  );
};

 

props에 navigation을 넣어주고, onPress로 앞서 개발해둔 라우터로 시켜줍니다.

function SettingScreen({navigation}) {

	...
	return(
    	...
        <Item onPress={() => navigation.navigate('Notice')}>
          <IconNotice />
          <Title>공지사항</Title>
      	</Item>
        ...
    )
})

같은 원리로 navigation.popToTop(); 으로 라우터의 최상단(루트)으로 갈 수도 있습니다

const Withdraw = ({navigation}) => {
  return (
    <Container>
      <Title>정말 탈퇴하시겠습니까?</Title>
     
     ...
     
      <View>
        <LongButton
          label="돌아가기"
          bgColor="#ffffff"
          textColor="#005500"
          borderPrimary={false}
          onPress={() => {
            navigation.popToTop();
          }}
        />
      </View>
    </Container>
  );
};

 

4.  undefined is not an object 에러

 

라우터간 이동을 하기 위해 onPress={() => navigation.navigate('이동하고 싶은 페이지 이름')} 으로 하면,

이런 에러를 보이는 경우가 있다.

 

같은 stack.Navigator 안에서 사용해서 일어나는 문제 같은데 (props을 전해주지 못해서) 

해결 방법은 https://reactnavigation.org/docs/connecting-navigation-prop/ 에 나와있다.

 

 1) useNavigation를 import

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

 

 2) 함수 생성

(onPress를 쓸 수 있는 태그는 어떤 것이든 ok. 아래 예시는 svg입니다.)

예시의 screenName은 props 이므로 어떤 네임을 써도 Ok.

function GoToButton({screenName}) {
  const navigation = useNavigation();

  return <IconCloseImg onPress={() => navigation.navigate(screenName)} />;
}

 

3) 사용하고 싶었던 곳에 GoToButton 함수 적용

function GoToButton({screenName}) {
  const navigation = useNavigation();

  return <IconCloseImg onPress={() => navigation.navigate(screenName)} />;
}

export default ({navigation}: any) => {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {Features('SignIn', SignIn, {headerShown: false})}
        {Features('SignUp', SignUp, {
          title: '회원가입',
          headerTitleAlign: 'center',
          headerRight: () => (
            <TouchableOpacity activeOpacity={0.5} style={{margin: 20}}>
              <GoToButton screenName="SignIn" />
            </TouchableOpacity>
          ),
        })}
        {Features('SignUp2', SignUp2, {
          title: '회원가입',
          headerTitleAlign: 'center',
          headerRight: () => (
            <TouchableOpacity activeOpacity={0.5} style={{margin: 20}}>
              <GoToButton screenName="SignIn" />
            </TouchableOpacity>
          ),
        })}
      </Stack.Navigator>
    </NavigationContainer>
  );
};