React navigation-导入文件导航页面

Question

此文件导入

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 请帮助我

Answer 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>);
}

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

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

React navigation-导入文件导航页面

React navigation- import file navigate page

react-native

react-navigation

expo

react-navigation-drawer