goback() 在反应导航 v2 中不起作用答案

【问题标题】：goback() does not work in react navigation v2goback() 在反应导航 v2 中不起作用
【发布时间】：2018-05-22 08:57:24
【问题描述】：

对于抽屉，我使用了以下代码

首页代码：

   export default class HomeScreen extends Component {
        render() {
            return (
                <Container>
                    <Header>
                        <Left/>
                        <Body>
...
                        </Body>
                        <Right style={{flex: 1}}>
                            <Button transparent onPress={() => {
                                this.props.navigation.openDrawer();
                                console.log('drawer');
                            }}>
                                <Icon name='menu'/>
                            </Button>
                        </Right>
                    </Header>
                    <Content>
                    </Content>
                </Container>
            );}
        }

我的主页的索引代码：

export default HomeScreenRouter = createDrawerNavigator({
     Home: {screen: HomeScreen},
     AboutUs: {screen: AboutUs}, 
    },{ 
    contentComponent: props => <SideBar {...props} />, 
    drawerPosition: "right",
     initialRouteName: 'Home', });

我的 AboutUs 页面的索引代码：

export default (DrawNav = createStackNavigator
    ({ AboutUs: {screen: AboutUs}, 
    },));

关于我们的代码：

export default class AboutUs extends React.Component {

        static navigationOptions = ({navigation}) => ({

            header: (
                <Header>
                    <Left/>
                    <Body>
...
        </Body>
                    <Right>
                        <Button transparent onPress={() =>navigation.goBack(null)}>
                            <Feather name="arrow-right" style={[{fontSize: 25, fontWeight: 'bold'}, styles.yellowColor]}/>
                        </Button>
                    </Right>
                </Header>
            )
        });
        render() {
            return (
                <Container>
                               ...
                </Container>
            );
        }}

此代码在版本 1 中没有问题

但是在版本2中，返回按钮不起作用

当我使用手机的后退按钮时，应用程序会关闭

【问题讨论】：

标签： react-native

【解决方案1】：

这可能会对你有所帮助。

//禁用设备后退按钮的页面代码

import {BackHandler} from 'react-native';

componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', 
this.handleBackButton);
}

componentDidMount() {
BackHandler.addEventListener('hardwareBackPress',this.handleBackButton);
}

handleBackButton() {
return true;
}

//设备后退按钮起作用的页面中的代码和用于返回上一页的自定义后退按钮

import {BackHandler} from 'react-native';

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', 
    this.handleBackButtonClick);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', 
    this.handleBackButtonClick);

}

handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}

按钮透明：

 onPress={() => goBack()}

【讨论】：