エラー：未定義（_this2.props.navigation.navigateを評価する）オブジェクトではありません

Question

Iカテゴリタブ（ボタン）をタップした後に、このエラーを得た： は定義は（_this2.props.navigation.navigateを評価する）オブジェクトではありません

AppFooterでナビゲーションプロパティが定義されていないようです

私はテーマベースにnativebaseを使用しています。

App.js

...  
import { AppRegistry } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 


export default class Home extends Component { 
    static navigationOptions = { 
     header: null, 
    } 
    render() { 
     return (
      <StyleProvider style={getTheme(platform)}> 
       <Container> 
        <Header style={{justifyContent:'flex-end'}}> 
         . . . 
        </Header> 
        <Content> 
         . . . 
        </Content> 
        <AppFooter/> 
       </Container> 
      </StyleProvider> 
     ); 
    } 
} 

const Pardisiha = StackNavigator({ 
    Home: { screen: Home }, 
    Category: { screen: Category }, 
}); 

AppRegistry.registerComponent('Pardisiha',() => Pardisiha); 

AppFooter.js

import React, { Component } from 'react'; 
import { Footer, Button, FooterTab, Text, Icon } from 'native-base'; 

export default class Index extends Component { 
    render() { 
     return (
      <Footer> 
       <FooterTab> 
        <Button vertical style={{paddingLeft:0,paddingRight:0}}> 
         <Icon name="person" /> 
         <Text>Profile</Text> 
        </Button> 
        <Button vertical style={{paddingLeft:0,paddingRight:0}}> 
         <Icon name="search" /> 
         <Text>Search</Text> 
        </Button> 
        <Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} > 
         <Icon active name="list" /> 
         <Text>Categories</Text> 
        </Button> 
        <Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.navigation.navigate('Category')} > 
         <Icon name="home" /> 
         <Text>Home</Text> 
        </Button> 
       </FooterTab> 
      </Footer> 
     ); 
    } 
} 

Answer 1

私はあなたのためのソリューションを持って、私はあなたのコードを試みたが、私の中で作業しています。 あなたのナビゲーションやAppFooterコンポーネントにそれを渡すことをナビゲートする機能を追加することができ、これは関数である。

App.js

onNavigate = (Screen) =>{ 
     this.props.navigation.navigate(Screen) 
} 

してからAppFooterに渡して、このいずれかにあなたのコードを変更：

App.js

<AppFooter onNavigate={this.onNavigate} /> 

、あなたは、この関数をコールする場合、その後、THIに変更あまりに秒1：

AppFooter.jsあなたが別のエラーを持っている場合は、あなたの問題を解決する、私に気づくしてくださいすることができ

<Button vertical style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Category')} > 
    <Icon active name="list" /> 
    <Text>Categories</Text> 
</Button> 
<Button vertical active style={{paddingLeft:0,paddingRight:0}} onPress={() => this.props.onNavigate('Home')} > 
    <Icon name="home" /> 
    <Text>Home</Text> 
</Button> 

希望、ありがとう:)