react-native - TouchableHighlight：在 onPress 之后删除突出显示？答案

【问题标题】：react-native - TouchableHighlight: Remove highlighting after onPress?react-native - TouchableHighlight：在 onPress 之后删除突出显示？
【发布时间】：2018-03-15 23:31:09
【问题描述】：

我正在开发一个简单的 react-native 应用，但在 TouchableHighlight 上遇到了问题：

按下TouchableHighlight 时，会显示一个新屏幕（使用react-navigation 中的StackNavigator）。按下后退按钮并返回原始屏幕后，TouchableHighlight 仍然具有黑色背景色 - 意思是它仍然突出显示。

我的问题是：

有没有办法手动取消激活TouchableHighlight-组件的突出显示？这样我就可以在 onPress 运行后禁用突出显示。
TouchableHighlight 保持突出显示的可能原因是什么？我在我的应用程序的其他部分使用它而没有导航，我可以想象它与此有关。

TouchableHighlight 存在于 FlatList 中。 renderItems 方法如下所示：

let handlePress = () => {
    this.props.navigation.navigate('DetailsScreen');
};
return <TouchableHighlight
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableHighlight>;

如果您需要/想了解更多信息，请告诉我。我已经在 android 上测试了代码，使用 Genymotion-emulator 和 Marshmallow。

版本是：

节点-v：8.9.4
npm -v: 5.6.0
react-native-cli: 2.0.1
反应原生：0.54.2
反应导航：1.5.2
构建环境：Windows 10 64 位

此时，我很确定错误在我的代码中，因为TouchableHighlight 在我的应用程序的其他部分正常工作，并且它可能与导航调用有关，但我无法查明，为什么。我已确保我的应用程序中没有异常或类似情况，因此 onPress 方法成功完成。

【问题讨论】：

标签： react-native react-navigation touchablehighlight

【解决方案1】：

您可以将 Touchable Highlight 替换为 Touchable opacity，只需将 activeOpactity 属性设置为值 1。它不会突出显示新闻。

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>

【讨论】：

【解决方案2】：

使用@Kartiikeya 的提示并将TouchableHighlight 与TouchableOpacity 交换并返回TouchableHighlight 后，它现在可以正常工作：

现在，在执行onPress 之后，按钮（无论是TouchableOpacity 还是TouchableHighlight）都失去了作用。

我不确定，为什么它现在有效。显而易见的原因是，源代码的重新编译修复了错误 - 但我之前多次重新编译它以编写原始问题，因此这不是一个选项。我建议其他用户清除任何可能的缓存，尤其是执行以下步骤：

关闭并重新打开 android 模拟器/重新启动您的测试设备
重新启动构建 PC
重新编译所有源代码
在控制台中检查错误和/或异常（显然）
将TouchableHighlight替换为TouchableOpacity，重新编译，检查错误是否仍然存在——如果不存在，将TouchableOpacity重新交换为TouchableHighlight

【讨论】：

【解决方案3】：

您可以将 Touchable Highlight 替换为 Touchable opacity。它不会突出显示新闻。

    return <TouchableOpacity
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableOpacity >;

【讨论】：

确实，当使用相同的代码切换到 TouchableOpacity 时，效果（这里：不透明度）确实会在 onPress 后按预期删除。然而，这并不是我想要的（TouchableHighlight 的效果更适合这种风格），但如果我不能正常工作，这绝对是一个有用的解决方法。

【解决方案4】：

对我来说，我需要在 onLongPress 被触发后禁用高亮效果。当你想删除它时，你可以简单地使用重新渲染来更改可触摸的键。

这是一个例子：

 <TouchableHighLight
   onPress={this.pressRow}
   style={styles.outerContainer}
   onLongPress={() => this.setState({ onLongPressed: true })}
   onPressOut={() => this.setState({ onLongPressed: false })}
   key={`long-pressed-${this.state.onLongPressed ? 'yes' : 'no'}`}>
  <View style={styles.innerContainer}>
    {rowText}
    {rowIcon}
  </View>
</TouchableHighLight>

【讨论】：

【解决方案5】：

按照 Leonardo Lusoli 的回答，您还应该补充一件事

  useEffect(() => {
    if(isLongPressed){
      setIsLongPressed(false)
    }
  }, [isLongPressed])

这一步是必要的，因为当第一个 onLongPress 事件被触发时，它会将 isLongPressed 设置为 true，从而更改组件的键，重新渲染并标识为新组件，并且之前的事件侦听器被丢弃，因此不会触发 onPressOut。所以

当 isLongPressed 设置为 true 时，组件会重新渲染，然后我们立即将其值设置为 false，从而获得预期的行为。否则，我们将得到一个意外的行为，然后是一个预期的行为。

【讨论】：