サイドバーの項目をクリックするとこのエラーが表示されます。「未定義はオブジェクトではありません（評価 'this.props.navigation.navigate」）」反応ナビゲーション

Question

react-navigation error img. 私は自分のアプリで反応ナビゲーションを使用しています。 - ネイティブベースのサイドバーでいくつかのテストをしようとしました。サイドバー内の任意のナビゲーション項目をクリックすると、このエラーが表示されます。このサイドバーではどうすれば解決できますか？コードは次のとおりです。

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

その後