Как получить доступ к реагирующей навигации из компонента, который не является HomeScreen? - PullRequest
Новая
       51

Как получить доступ к реагирующей навигации из компонента, который не является HomeScreen?

0 голосов
/ 06 сентября 2018

Я создаю приложение React Native. Я импортировал createStackNavigator из реагирования навигации. Я могу заставить его работать на моем домашнем экране - я нажимаю кнопку, и это приводит меня к новому компоненту. Это код, который я использую, чтобы перенести его в мой Home.js 

// src/components/Home/Home
export class Home extends Component {
  render() {
    return (
      <React.Fragment>
        <Button
          title="Test button"
          onPress={() => this.props.navigation.navigate('Roads')}
        />

        <StatusBar />
        <Header />
        <Menu />
      </React.Fragment>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: Home,
    Roads: Roads,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Моя домашняя страница занимает меню, в котором есть список элементов меню. Я пытаюсь заставить MenuItems перейти на соответствующие страницы. Когда я пытаюсь ввести навигацию внутри метода визуализации MenuItem.js, вот так: 

// src/components/Roads/Roads
  render() {
    const { navigate } = this.props.navigation;
    console.log(this.props, "props is here");

Я получаю следующее сообщение об ошибке:

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate').

Нужно ли передавать навигатор вниз в реквизит к Menu.js, а затем к MenuItem.js? В документах приводятся примеры, но, похоже, это примеры, в которых предполагается, что весь код записан в одном файле, а не в нескольких компонентах.

Правильно ли я настроил это?

1 Ответ

0 голосов
/ 06 сентября 2018

При использовании навигатора из реагирующей навигации только компоненты, которые вы объявили в качестве экранов, наследуют навигационную опору (в вашем случае Home и Roads)

Это означает, что вам нужно будет передать его своим детям, как вы сказали: 

<Menu navigation={this.props.navigation} />
<MenuItem navigation={this.props.navigation} />

В случае, если кому-то интересно узнать, как перемещаться из компонента, который не находится внутри Навигатора, тогда я предлагаю прочитать эту часть реагирующей навигационной документации

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

...