Реагировать на навигацию 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
    }
})

Моя проблема navigation.navigate не работает. Мои маршрутизаторы работают хорошо, потому что я могу перейти к «входу в систему» ​​с другим экраном. Я читал кое-что о чистых компонентах, нодо сих пор не понимаю, как решить эту проблему. Что вы предлагаете?Кстати, я новичок, чтобы реагировать на родную.

Answer 1

используйте import { withNavigation } from 'react-navigation'; вверху и затем export default withNavigation(FilmItem); в конце.

См. Документ: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 2

Если ваш заголовок не является маршрутом в вашем маршрутизаторе в заголовке вашего приложения, вам нужно будет использовать withRouter от реагирующего маршрутизатора

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

Теперь вы сможете получить доступ к this.props.Навигация без прямой передачи его в качестве реквизита от родительского компонента.