Question

我正在创建一个故事应用程序，其中包含爱情故事和笑话两个部分，我使用Drawer Navigator服务这两个部分。当用户使用抽屉导航器输入爱情故事或笑话时，他们可以根据选择看到爱情故事或笑话列表。点击某个项目后，它会显示爱情故事或笑话的详细信息。抽屉导航成功运行，但当我尝试输入列表项的详细信息时，它会显示下面给出的错误：

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

无法从DrawerNavigator访问StackNavigator

1 个答案: