当你点击侧边栏项目“undefined不是一个对象（评估'this.props.navigation.navigate'）时显示此错误”react-navigation

Question

react-navigation error img. 我在我的应用程序中使用react-navigation。试图用-native-base侧栏做一些测试。当你点击侧栏内的任何导航项时，它会显示此错误。如何解决这个边栏？以下是代码：

import React, { Component } from "react"; 
import { View, ScrollView,Button,Text,StyleSheet,Dimensions } from "react-native"; 
import {Container,Content,List,Icon,Badge,ListItem,Left,Right,Body} from 'native-base' 
import Exponent from 'expo' 


import { DrawerItems } from 'react-navigation'; 
const screenHeight = Dimensions.get('window').height; 
const datas = [ 
    { 
     name: "Home", 
     route: "HomeScreen", 
     icon: "phone-portrait", 
     bg: "#C5F442", 
    }, 
    { 
     name: "Business", 
     route: "Business", 
     icon: "easel", 
     bg: "#C5F442", 
    }, 
    { 
     name: "Education", 
     route: "Education", 
     icon: "phone-portrait", 
     bg: "#477EEA", 
     types: "8", 
    }, 
    { 
     name: "Life Style", 
     route: "Lifestyle", 
     icon: "phone-portrait", 
     bg: "#DA4437", 
     types: "4", 
    }, 
    { 
     name: "Tech", 
     route: "Tech", 
     icon: "notifications", 
     bg: "#4DCAE0", 
    }, 
    { 
     name: "Contact", 
     route: "Contact", 
     icon: "radio-button-off", 
     bg: "#1EBC7C", 
     types: "9", 
    },] 


const DrawerContent = (props) => { 

    let showItems = props.items.filter(itemObj => { 
    return itemObj.routeName !== 'Welcome' 
     && itemObj.routeName !== 'Signin' 
     && itemObj.routeName !== 'Signup' 
    }) 


    return (
    <View style={style.container}> 
    <Content> 
    <List 
      dataArray={datas} 
      renderRow={data => 
      <ListItem button noBorder onPress={() => this.props.navigation.navigate(data.route)}> 
       <Left> 
       <Icon active name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} /> 
       <Text> 
        {data.name} 
       </Text> 
       </Left> 
       {data.types && 
       <Right style={{ flex: 1 }}> 
        <Badge 
        style={{ 
         borderRadius: 3, 
         height: 25, 
         width: 72, 
         backgroundColor: data.bg, 
        }} 
        > 
        <Text>{`${data.types} Types`}</Text> 
        </Badge> 
       </Right>} 
      </ListItem>} 
     /> 
     </Content> 


    </View> 
) 
} 

const style = StyleSheet.create({ 
    container: { 

    height: screenHeight, 
    backgroundColor: '#494949', 
    flex:1, 
    paddingTop: Exponent.Constants.statusBarHeight, 

    }, 
}); 

export default DrawerContent; 

是否有解决此错误和此代码？

Answer 1

我也面临类似的问题，使用这样的

在您的课堂，您使用的侧边栏类中声明的功能进行导航

goto(route) { 
     console.log("navigation" + route); 
     const { navigate } = this.props.navigation; 
     navigate(route); 
    } 

那么这个功能结合到边栏

content={<DrawerContent route={this.goto.bind(this)} />} > 

然后在侧边栏的文件处理上按这样

onPress={() => this.props.route('Page Name')}