我正在构建一个React Native应用程序。我已经从react-navigation导入了createStackNavigator。我可以在主屏幕上运行它-单击一个按钮，它将带我到一个新组件。这是我用来将其带入Home.js的代码
1. Include <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> to html template.
2. Use it: <h1>Hello world! <i class="em-svg em-100"></i></h1>
我的主页进入一个包含MenuItems列表的Menu。我试图让MenuItems跳到适当的页面。当我尝试在// src/components/Home/Home
export class Home extends Component {
render() {
return (
<React.Fragment>
<Button
title="Test button"
onPress={() => this.props.navigation.navigate('Roads')}
/>
<StatusBar />
<Header />
<Menu />
</React.Fragment>
);
}
}
const RootStack = createStackNavigator(
{
Home: Home,
Roads: Roads,
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
的render方法中引入导航时，如下所示：
MenuItem.js我收到以下错误消息：
// src/components/Roads/Roads
render() {
const { navigate } = this.props.navigation;
console.log(this.props, "props is here");
。
我是否需要将导航器中的道具传递给TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')，然后传递给Menu.js？这些文档提供了示例，但似乎是示例，它们假定您将所有代码都放入一个文件中，而不是跨多个组件。
我正确设置了吗？
答案 0 :(得分：1)
在通过反应导航使用导航器时，只有您声明为屏幕的组件会继承导航道具（在您的情况下为Home and Roads）
这意味着您将需要像它所说的那样将其作为道具传递给孩子：
<Menu navigation={this.props.navigation} />
<MenuItem navigation={this.props.navigation} />
如果有人想知道如何从不在Navigator内的组件进行导航，那么我建议阅读react-navigation文档的这一部分
https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html