React-навигация с кнопкой в ​​шапке

Question

Я пытаюсь перенаправить на страницу профиля с помощью кнопки в шапке с react-navigation.

Вот что такое createStackNavigator:

const NavigationApp = createStackNavigator({
    Profile: { screen: ProfileScreenContainer },
    Application: { 
        screen: Application,  
        navigationOptions: {
            title: "Title",
            headerStyle: {
            backgroundColor: "#000",
        }, 
        headerTintColor: '#fff',
        headerRight: (
          <HeaderScreenContainer/>
        ), 
      },
    },
},
{
    initialRouteName: "Application"
});
const App = createAppContainer(NavigationApp);
export default App;

Вот мой экранный контейнер для заголовка:

export default class HeaderScreenContainer extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
    }

    handleProfile() {
        this.props.navigation.navigate('Profile');
    }
}

Это кнопка, которую я отображаю в заголовке и которая должна перенаправлять на страницу профиля.

export default class HeaderScreen extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Button onPress={() => this.props.profile()}>
                <Text>Profile</Text>    
            </Button>
        )
    }
}

Я постоянно получаю сообщение об ошибке: undefined is not an object (evaluating 'this.props.navigation.navigate'). На самом деле он должен перенаправить на страницу профиля.

Answer 1

Полагаю, вам просто нужно обернуть HeaderScreenContainer в withNavigation HOC вот так ...

class HeaderScreenContainer extends Component {

    constructor(props){
        super(props);
    }

    render() {
        return (<HeaderScreen profile={this.handleProfile.bind(this)} />);
    }

    handleProfile() {
        this.props.navigation.navigate('Profile');
    }
}

export default withNavigation(HeaderScreenContainer)