Блог

С помощью React-Navigation , чтобы перейти на определенную страницу, я бы сделал это:

 navigation.navigate('ProgramNav', {
  screen: "Programs"
});
navigation.navigate('ProgramNav', {
  screen: "Class List",
  params: {
    programId,
  }
});
navigation.navigate('ProgramNav', {
  screen: "Student Items",
  params: {
    programId,
    studentId,
  }
});
navigation.navigate('ProgramNav', {
  screen: "Student Item View",
  params: {
    programId,
    studentId,
    itemId
  }
});
 

До сих пор это не было большой проблемой, но я хочу сделать так, чтобы при переходе к "Programs" экрану он проверял, есть ли одна программа. Если это так, он автоматически переходит к "Class List" этой программе (в идеале удаляя себя из стека). НО я хочу, чтобы эта логика была в ProgramsScreen компоненте, а не там, где я это делаю navigation.navigate .

Я также хочу убедиться , что, когда я нажму Back , он также пропустит экран.

Я думаю, что это что-то вроде navigation.replace() того, когда есть что-то вроде useFocusEffect

Я заставил его работать с useFocusEffect и replace , НО он делает анимацию. Есть ли способ избежать этой анимации?

   useFocusEffect(useCallback(() => {
    if (programs.length === 1) {
      navigation.replace('Class List', {
        ...route.params,
        programId: programs[0].programID
      })
    }
  }, []))
 

Чтобы обойти проблему с анимацией, по крайней мере, когда я перемещаюсь с панели вкладок. Мне пришлось создать новый маршрут и сделать его новым начальным маршрутом, чтобы, если я перейду на корневую страницу, я направился бы к нужной странице, используя useFocuseEffect , как указано выше, и применялся к комбинациям, ведущим к экрану, который мне также нужен null , и headerShown: false чтобы предотвратить отображение любого содержимого.