React 导航-导入文件导航页面

【问题标题】：React navigation- import file navigate pageReact 导航-导入文件导航页面
【发布时间】：2020-01-23 22:50:03
【问题描述】：

此文件导入

class Footer extends Component {
  _notifications = () => {
    const { navigate } = this.props.navigation;
    navigate('Ntf', {});
  }

  render() {
    return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
  }
}

这个文件主要（React-Navigation - NavigationDrawerStructure）。

import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
    return (<View><Footer/></View>);
}

出现错误后单击 _notifications 按钮：未定义是一个对象 c.props.navigation.navigate 请帮帮我

【问题讨论】：

标签： react-native react-navigation expo react-navigation-drawer

【解决方案1】：

只有路由中定义的组件才能访问导航道具，而不是这些组件的子组件！。

解决方案：-

导入文件

class Footer extends Component {
  _notifications = () => {
     this.props.NavigateToNTF()
  }

  render() {
    return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
  }
}

主文件：-

import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
    return (<View><Footer NavigateToNTF={()=> this.props.navigation.navigate('Ntf', {}) } /></View>);
}

导航道具在子组件中不可用，这就是为什么您在调用导航道具时得到未定义的原因，但是使用此解决方案，我们将道具从父文件（主文件）发送到子组件（导出文件），这样它就会工作！。

如果有帮助！一定要激励我?你知道我的意思！

【讨论】：