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)

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

1 个答案: