带有 React Native Navigation 的可触摸 onPress 不起作用

Question

下面的代码有效，点击后我会进入 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>

Answer 1

TouchableWithoutFeedback 总是需要有子视图组件。

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

Answer 2

您的 navigateToScreen 函数正在返回另一个函数，在您的工作示例中，它是按下时调用的函数。在将 onPress 更改为箭头函数的地方，您调用的是 navigateToScreen 而不是 returns.

的函数

改成

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

应该可以，或者您可以删除 navigateToScreen 函数中的第二个箭头函数，这样它就不再是 returns 函数而是执行代码本身

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

我会推荐此选项，但请记住，您当前工作的示例在这种情况下将不再有效。

带有 React Native Navigation 的可触摸 onPress 不起作用

Touchable onPress with React Native Navigation not working

javascript

react-native

arrow-functions

react-navigation