React Native：按钮 onPress 不起作用

Question

按下按钮时导航不起作用。这是我的登录页面。我想退出 onPressLogout() 从主屏幕到登录屏幕

index.js

class Profile extends Component{
static propTypes = {
    navigator: PropTypes.shape({
        getCurrentRoutes: PropTypes.func,
        jumpTo: PropTypes.func,
    }),
}
onPressLogout() {
    const routeStack = this.props.navigator.getCurrentRoutes();
    this.props.navigator.jumpTo(routeStack[0]);
}
render(){
  return (
         <Container>
             <View style={styles.container}>        
               <Header>
                     <Button 
                     style={styles.button}
                     onPress={() => this.onPressLogout()}
                     >
                     <Icon name="ios-power" />
                     </Button>
                     <Title>Logout</Title>
               </Header>
            </Container>
 );
}

在路由栈中

const routeStack = [
{ name: 'Login', component: Login},  
]

Answer 1

使用.bind() 更改this 的上下文。或者，使用箭头函数。

bind()

这需要一个构造函数。

constructor() {
  super();
  this.onPressLogout = this.onPressLogout.bind(this);
}

箭头函数

onPressLogout = () => {
  const routeStack = this.props.navigator.getCurrentRoutes();
  this.props.navigator.jumpTo(routeStack[0]);
}

旁注：

你可以在这里做一些 ES6 解构

onPressLogout = () => {
  const {
     navigator: {
       getCurrentRoutes,
       jumpTo
     }
  } = this.props;
  const routeStack = getCurrentRoutes();
  jumpTo(routeStack[0]);
}