可触摸的用反应本机导航无法正常工作

Question

以下代码有效，当单击时，我将登录堆栈导航器

<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函数正在返回另一个函数，在您的工作示例中，这是按下时调用的函数。在哪里更改为箭头函数的地方，您正在调用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

touchable -tobleotfeedback始终需要具有子查看组件。

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