navigation.push in undefined для contentComponent навигации по ящику в react-native

Версия React-навигации: 3.0.9

Я создаю drawerLayout в react-native с помощью следующего кода с помощью react-navigation:

export default createDrawerNavigator(
  {
    Pin: {
      screen: PinScreen,
      navigationOptions: {
        drawerLockMode: 'locked-closed'
      }
    },
    ListView: { screen: ListViewScreen },
  },
  {
    initialRouteName: 'Pin',
    headerMode: 'none',
    contentComponent: props => <SideBar {...props} />
  }
);

Внутри этого SideBar компонента у меня есть следующий код обработки касания элемента:

<ListItem
  style={styles.listItem}
  onPress={() => {
    this.props.navigation.dispatch(DrawerActions.closeDrawer());
    this.props.navigation.push('ListView');
  }}
>
  <Text>Home screen</Text>
</ListItem>

Но когда я нажимаю этот элемент, я получаю сообщение, что this.props.navigation.push не определено в этом onPress обработчике.

Мне нужен экран ListView, чтобы обновлять данные, когда-то показанные после действия навигации, и теперь поместить логику извлечения данных внутрь componentDidMount. push действительно работает для других экранов, но я чувствую, что эти props, которые передаются в SideBar, отличаются.

Итак, вопрос: как сделать ListView перемонтировать / обновить данные экрана при переходе с SideBar, как описано выше?


react-native react-navigation react-navigation-drawer
person zmii    schedule 16.01.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Пожалуйста, используйте navigation.navigate () для изменения экрана, например

onPress={()=> this.props.navigation.navigate("ListView")}

И вы можете использовать componentDidMount () в своем компоненте ListView.

person Zeeshan Ansari    schedule 16.01.2019
comment
в моих настройках он не перемонтирован и даже не перерисован. Это было мое первоначальное решение, которое не сработало, как ожидалось. - person zmii; 16.01.2019
comment
Скажите, пожалуйста, вашу версию реакции-навигации - person Zeeshan Ansari; 16.01.2019
comment
react-navigation@^3.0.9: версия 3.0.9 - person zmii; 16.01.2019

arrow_upward
-1
arrow_downward

Вам нужно обернуть боковую панель с помощью withNavigation в соответствии с документами response-navigation https://reactnavigation.org/docs/en/with-navigation.html;

import React from 'react';
import { withNavigation } from 'react-navigation';

class SideBar extends React.Component {
    render() {
        return (
            <div></div>
        );
    }
}

export default withNavigation(SideBar);
person sdkcy    schedule 16.01.2019
comment
Этот метод используется для доступа к глубоко вложенному дочернему элементу или не может напрямую передать свойство навигации. Таким образом, this.props.navigation будет определен, как в документации по реакции-навигации. Вам следует прочитать этот документ reactnavigation.org/docs/en/with-navigation.html - person sdkcy; 16.01.2019