带有React Native Navigation的Touchable onPress不起作用

Question

The below code works and when clicked takes me the loginStack Stack Navigator

<TouchableWithoutFeedback 
    onPress={ this.navigateToScreen('loginStack') }>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

My NavigateToScreen function looks like this

navigateToScreen = (route) => () => {
        const navigationAction = NavigationActions.navigate({
            routeName: route
        })
        this.props.navigation.dispatch(navigationAction)
    }

Since I need to manage multiple stuff, I converted it to an arrow function and it doesn't work. The below code does nothing when pressed. No response at all.

<TouchableWithoutFeedback 
    onPress={ () => this.navigateToScreen('loginStack') }>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

How do I fix this so I can run multiple lines of code on the onPress function like given below?

<TouchableWithoutFeedback 
    onPress={ () => { this.navigateToScreen('loginStack') 
                      AsyncStorage.removeItem('token') 
                    }}>
        <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

Answer 1

Your navigateToScreen function is returning another function, which in your working example is the function being called when pressed. Where you changed onPress to an arrow function, you are calling navigateToScreen but not the function it returns.

Changing it to

<TouchableWithoutFeedback 
    onPress={ () => {
        this.navigateToScreen('loginStack')()
        AsyncStorage.removeItem('token')
}}>
    <View><Text>Click Me</Text></View>
</TouchableWithoutFeedback>

should work, or you could remove the second arrow function in your navigateToScreen function so it no longer returns a function but executes the code itself

navigateToScreen = (route) => {
        const navigationAction = NavigationActions.navigate({
            routeName: route
        })
        this.props.navigation.dispatch(navigationAction)
    }

I would recommend this option, but keep in mind your currently working example would no longer work in this case.

Answer 2

TouchableWithoutFeedback always needs to have child View component.

<TouchableWithoutFeedback onPress={ this.navigateToScreen('loginStack') }}>
  <View>
      <Text>Click Me</Text>
  </View>
</TouchableWithoutFeedback>