反应导航 - 导入文件导航页面

Question

此文件导入

class Footer extends Component {
_notifications = () => {
const { navigate } = this.props.navigation;
navigate('Ntf', {});
}
render() {
return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
}
}

此文件主(反应导航 - 导航抽屉结构(。

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

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

如果它有帮助！确保激励我，你知道我😜的意思！