React Native：Button 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>
 );
}

並在routeStack中

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]);
}