StackNavigator不能从DrawerNavigator访问

Question

我正在创建一个包含两个部分的故事应用程序--爱情故事和笑话，我使用抽屉导航器为这两个部分服务。当用户使用抽屉导航器输入“爱情故事”或“笑话”时，他们可以看到基于所选内容的爱情故事或笑话列表。点击一个特定的项目，它会显示一个爱情故事或一个笑话的细节。抽屉导航成功运行，但当我尝试输入列表项的详细信息时，它将显示以下错误：

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

PostList.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>
    )         
  )
 }       
}

App.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'
  });

index.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}
                     />,