Question

我正在开发一个简单的本机应用程序，并且在TouchableHighlight上遇到问题：

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

我的问题是：

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

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

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

如果您需要/想要任何进一步的信息，请告诉我。我使用Genymotion-emulator和Marshmallow测试了android上的代码。

版本是：

node -v：8.9.4
npm -v：5.6.0
react-native-cli：2.0.1
react-native：0.54.2
react-navigation：1.5.2
构建环境：Windows 10 64位

此时，我非常肯定错误在我的代码中，因为TouchableHighlight在我的应用的其他部分正常工作，并且它可能与导航调用有关，但我无法确切地指出原因。我确保在我的应用程序中没有异常或类似内容，并且onPress方法因此成功完成。

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

您可以使用Touchable不透明度替换Touchable Highlight。它不会突出媒体。

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

Answer 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>

Answer 5

按照莱昂纳多·卢索利的回答，您还应该添加一件事

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

此步骤是必要的，因为当第一个onLongPress事件被触发时，它将isLongPressed设置为true，从而更改键，从而重新呈现该组件，并将其标识为新组件，并且previour事件列表将被释放，因此不会触发onPressOut。所以

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

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

5 个答案: