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

下面的代码有效，当单击时，我将使用loginStack Stack Navigator

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

我的NavigateToScreen函数看起来像这样

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

由于我需要管理多个内容，因此将其转换为箭头功能，但是它不起作用。按下时，以下代码不执行任何操作。完全没有回应。

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

如何解决此问题，以便可以在onPress函数上运行多行代码，如下所示？

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

最佳答案

您的navigateToScreen函数将返回另一个函数，在您的工作示例中是按下该函数时所调用的函数。在将onPress更改为箭头功能的地方，您正在调用navigateToScreen，但没有调用它返回的功能。

更改为

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

应该可以工作，或者您可以在navigateToScreen函数中删除第二个箭头函数，这样它不再返回函数，而是自己执行代码

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

我建议使用此选项，但是请记住，在这种情况下，您当前正在使用的示例将不再起作用。