在标题中使用按钮进行反应导航

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)