使用 reactnavigation 时出错：未定义不是对象（评估 _this2.props.navigation.navigate）答案

【问题标题】：error using reactnavigation: undefined is not object (evaluating _this2.props.navigation.navigate)使用 reactnavigation 时出错：未定义不是对象（评估 _this2.props.navigation.navigate）
【发布时间】：2017-07-20 10:21:36
【问题描述】：

点击类别选项卡（按钮）后出现此错误： undefined 不是对象（评估 _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>
        );
    }
}

【问题讨论】：

标签： react-native navigation native-base

【解决方案1】：

我有一个解决方案给你，我已经尝试过你的代码，并在我身上工作。您可以添加功能来导航导航并将其传递给AppFooter 组件，这就是功能：

App.js

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

然后传入你的AppFooter，将你的代码修改成这个：

App.js

<AppFooter onNavigate={this.onNavigate} />

然后如果你想调用这个函数，也修改成这个：

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>

希望能解决您的问题，如果您有其他错误，请通知我，谢谢:)

【讨论】：