Блог

Я новичок в React/RN и понимаю, как работает навигация, но на самом деле не вижу рекомендаций по запуску навигации с помощью тривиального компонента, такого как случайная кнопка где-то, которая должна вызвать изменение маршрута.

Допустим , эта кнопка вложена в набор элементов, которые находятся под набором <Tab.Navigator> , которые находятся под набором <Stack.Navigator> и т. Д. Пара макетов экрана в глубину. Этот элемент не может получить доступ this.props.navigation . Поэтому моя идея состоит в том, чтобы отправить вверх. Но это может означать передачу onPress обработчика, например, на 5 или 6 слоев вниз. Это правильный путь? Должен ли я передавать его только от родителя, ближайшего к навигатору, или полностью App.tsx ?

Если вы не можете использовать <Link> компонент, то вам следует использовать объект истории.
Например, useHistory крючок вернет его ( всякий раз, когда вы будете импортировать),
так что ваш компонент может быть вложен как черт.

 import { useHistory } from 'react-router-dom'

function HomeButton() {
  const history = useHistory()

  function handleClick() {
    history.push('/home')
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  )
}