反应导航 this.props.navigation 未定义

Question

我有一个这样的自定义标题

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
import { Header, Left, Right, } from 'native-base';
import { Icon } from 'react-native-elements';

export default class MainHeader extends React.Component {

pressSearch() {
    this.props.navigation.navigate('Login');
}
render () {
    return(
        <Header style={{paddingTop:25}}>
            <Left style={{marginBottom:10}}>
                <TouchableOpacity>
                    <View style={{flexDirection:'row'}}>
                        <Image
                            style={styles.stretch}
                            source={require('../images/logoforplay.png')}
                        />
                        <Text style={styles.headerText} > Eventlinn </Text>
                    </View>
                </TouchableOpacity>
            </Left>
            <Right>
                <TouchableOpacity
                    style={styles.headerButton}
                    onPress={this.pressSearch.bind(this)}
                >
                    <Icon
                        name={'search'}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.headerButton}
                >
                    <Icon
                        name={'add-location'}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.headerButton}
                >
                    <Icon
                        name={'notifications'}
                    />
                </TouchableOpacity>
            </Right>
        </Header>


      )
    }
}
const styles = StyleSheet.create ({
    mainContainer: {
        flex:1,
        backgroundColor:'white'
    },
    cardContainer: {
        flex:1
    },
    stretch: {
        height:35,
        width:35,
    },
    headerText: {
        fontSize:24,
        marginTop:3,
    },
    headerButton: {
        marginBottom:10,
        marginLeft:15
    }
})

我的问题导航。导航不起作用。我的路由器运行良好，因为我可以使用另一个屏幕导航到“登录”。我阅读了一些关于纯组件的内容，但仍然不明白如何解决这个问题。你有什么建议？顺便说一句，我是新来的原生反应。

Answer 1

在顶部使用import { withNavigation } from 'react-navigation';，然后在末尾使用export default withNavigation(FilmItem);。

见文档：https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 2

如果您的标头不是应用程序头部路由器中的路由，则需要使用 react-router 中的 withRouter

import {withNavigation} from 'react-navigation'
export default withNavigation(MainHeader)

现在您应该能够访问 this.props.navigation 而无需直接将其作为 prop 从父组件向下传递。