навигация

Question

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

Я создаюстройка в ящик в 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 экран для обновления данных, которые показывались после действия навигации, и теперь помещают логику выборки данных в componentDidMountpush работает для других экранов, но я чувствую, что эти props, которые передаются в SideBar, отличаются.

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

Answer 1

Вам нужно обернуть боковую панель с помощью 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);

Answer 2

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

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

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