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

Question

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

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

我的问题是：

• 有没有办法手动停用TouchableHighlight-component的突出显示？这样我就可以在onPress运行后禁用突出显示。
• TouchableHighlight突出显示停留的可能原因是什么？我在没有导航的情况下在应用程序的其他部分使用它，我可以想象它与此有关。

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

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

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

版本是：

• 节点-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 方法成功完成。

Answer 1

您可以用 Touchable opacity 替换 Touchablehighlight，并简单地将 activeOpactity 属性设置为值 1。它不会突出显示按下的按钮。

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

Answer 2

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

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

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

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