React Native Error : The action 'NAVIGATE' with payload {"name":"News"} was not handled by any navigator.

 The action 'NAVIGATE' with payload {"name":"News"} was not handled by any navigator.

: useNavigation을 통해서 화면을 전환하려고 할 때 발생하는 오류 

---

네비게이션을 통해서 이동하고 싶은 화면은 Notice 화면

 

첫번째 오류 상황 

- 헤더 컴포넌트에서 useNavigation을 통해 뉴스 스크린으로 이동하려고 시도 -> 오류 

- News 화면으로 이동하는게 아니라 Notice 화면으로 이동해야한다는 것을 깨달음 

function MainHeader({title}: {title: string}) {
  const navigation = useNavigation<any>();
  const goToNoticeHandler = () => {
    navigation.navigate('News');
  };
  return (
    <View style={styles.headerZone}>
      <Text style={styles.headerText}>{title} </Text>
      <Icon name="bell" size={25} color="#868B94" onPress={goToNoticeHandler} />
    </View>
  );
}

 

두번째 오류 상황 

- 여전히 오류 발생 

 

 action 'NAVIGATE' 때문에 네비게이션이 제대로 작동하지 않는 경우 

- 1. 스크린 컴포넌트가 네비게이션 스택에 등록되지 않은 경우 

- 2. 네비게이션 컨테이너가 제대로 등록되지 않은 경우

- 3. 올바른 네비게이션 액션을 이용하지 않은 경우(컴포넌트 이름을 잘못 작성하는 등) 

 

-> 1번의 경우로 Notice 화면이 어떤 네비게이션 스택에도 포함되지 않았다는 것을 깨달음 

function MainHeader({title}: {title: string}) {
  const navigation = useNavigation<any>();
  const goToNoticeHandler = () => {
    navigation.navigate('Notice');
  };
  return (
    <View style={styles.headerZone}>
      <Text style={styles.headerText}>{title} </Text>
      <Icon name="bell" size={25} color="#868B94" onPress={goToNoticeHandler} />
    </View>
  );
}

 

해결 

Notice 화면을 네비게이션 스택에 등록해줌

function HomeScreen({navigation}: HomeStackScreenProps) {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Main"
        component={MainScreen}
        options={{headerShown: false}}
      />
      <HomeStack.Screen
        name="NewPost"
        component={NewPost}
        options={{headerShown: false}}
      />
      <HomeStack.Screen
        name="PostDetail"
        component={PostDetail}
        options={{headerShown: false}}
      />
      <HomeStack.Screen
        name="Notice"
        component={NoticeScreen}
        options={{headerShown: false}}
      />
    </HomeStack.Navigator>
  );
}