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

您的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)
    }

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

Answer 2

TouchableWithoutFeedback始终需要具有子视图组件。

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

触摸onPress与React Native Navigation无法正常工作

2 个答案: