Question

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

2017-12-13

8095

javascript react-native react-navigation arrow-functions

以下代码有效，单击后会带我进入 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 始终需要有子 View 组件。

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