react-native

Question

我正在开发一个简单的 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>;

如果您need/want有任何进一步的信息，请告诉我。我已经在 android 上使用带有 Marshmallow 的 Genymotion 模拟器测试了代码。

版本是：

节点-v:8.9.4
npm -v: 5.6.0
react-native-cli: 2.0.1
本机反应：0.54.2
反应导航：1.5.2
构建环境：Windows10 64位

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

Answer 1

您可以将可触摸高光替换为可触摸不透明度。它不会突出显示媒体。

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

Answer 2

在使用来自@Kartiikeya 的提示并将 TouchableHighlight 与 TouchableOpacity 交换并返回到 TouchableHighlight 后，它现在按预期工作：

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

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

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

Answer 3

对我来说，我需要在触发 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>

Answer 4

您可以将 Touchable Highlight 替换为 Touchable opacity，只需将 activeOpactity 属性设置为 1。它不会高亮按下。

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

Answer 5

根据 Leonardo Lusoli 的回答，您还应该补充一件事

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

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

当 isLongPressed 设置为 true 时，组件重新呈现，然后我们立即将它的值设置为 false，因此我们得到了预期的行为。否则我们将得到意外的行为，然后是一种预期的行为。

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

react-native - TouchableHighlight: Remove highlighting after onPress?

react-navigation

touchablehighlight