无法从 DrawerNavigator 访问 StackNavigator

Question

我正在创建一个包含两个部分的故事应用程序 爱情故事 和 笑话，我正在使用抽屉导航器提供这两个部分。当用户使用抽屉导航器输入爱情故事或笑话时，他们可以看到基于所选内容的爱情故事或笑话列表。单击某个项目后，它会显示爱情故事或笑话的详细信息。抽屉导航成功工作，但是当我尝试输入列表项的详细信息时，它向我显示以下错误：

Undefined is not an object (evaluating '_this3.prop.navigation.navigate) 

帖子列表.js：

render() {
return (
  <View>
    <Header
      headerText = {this.props.headerText}
    />
    <ScrollView>
      {this.renderPosts()}
    </ScrollView>
  </View>
 );
}
renderPosts() {
  return this.state.posts.map(p=>(
    <View key={p.id}>
      <Card>
        <Button
          title="Go to Jane's profile"
          onPress={() =>
            {this.props.navigation.navigate('PostDetail')}  //error is generated here
          }
        />
      </Card>
    </View>
    )         
  )
 }       
}

应用.js：

export const Drawer = DrawerNavigator (
  {
 LoveStory: {
   screen: (props)=> <PostList 
                       headerText = 'Love Story'
                       blogId = '5278762286036727816'
                       apiKey = 'AIghSyDzawc245f4_sgIv8lSucdp7yJs__O29Qw'
                     />,
   navigationOptions: {
       drawerLabel: 'Love Story',
   },
 },
 Jokes: {
    screen: (props)=> <PostList 
                       headerText = 'Jokes'
                       blogId = '3124493334962174072'
                       apiKey = 'AIbJXRBgxJZvBQzaSyJAyq4_irQ-2OCOkFyrpH8'
                     />,
   navigationOptions: {
       drawerLabel: 'Jokes',
   },
 },},{
initialRouteName: 'LoveStory',
drawerPosition: 'left',
});
export const StackNav = StackNavigator(
{
  Main: {
    screen: Drawer
  },
  PostDetail: {
    screen: PostDetail,
  }
  },{
    headerMode: 'none'
  });

索引.js：

import { AppRegistry } from 'react-native';
import {StackNav} from './App';
AppRegistry.registerComponent('golpo_app', () => StackNav);

Answer 1

您没有将navigation道具传递给PostList组件。

要解决此问题，请在 App.js 中更改此设置：

   screen: (props)=> <PostList 
                       headerText = 'Love Story'
                       blogId = '5278762286036727816'
                       apiKey = 'AIghSyDzawc245f4_sgIv8lSucdp7yJs__O29Qw'
                     />,

自

   screen: (props)=> <PostList 
                       headerText = 'Love Story'
                       blogId = '5278762286036727816'
                       apiKey = 'AIghSyDzawc245f4_sgIv8lSucdp7yJs__O29Qw'
                       {...props}
                     />,

或

   screen: (props)=> <PostList 
                       headerText = 'Love Story'
                       blogId = '5278762286036727816'
                       apiKey = 'AIghSyDzawc245f4_sgIv8lSucdp7yJs__O29Qw'
                       navigation = {props.navigation}
                     />,