react-native - navigation.push 为 react-native 中抽屉导航的 contentComponent 未定义

Question

反应导航版本：3.0.9

react-native我在以下代码的帮助下创建了drawerLayout 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

Answer 1

请使用 navigation.navigate() 更改屏幕，例如

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

您可以在 ListView 组件中使用 componentDidMount()。

Answer 2

您需要根据 react-navigation 的文档https://reactnavigation.org/docs/en/with-navigation.html用 withNavigation 包装 SideBar ；

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

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

export default withNavigation(SideBar);