5

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

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

版本是：

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

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

4

5 回答 5

2

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

现在，在onPress执行之后，按钮（无论是 aTouchableOpacity还是 a TouchableHighlight）失去其效果。

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

  • 关闭并重新打开 android 模拟器/重新启动您的测试设备
  • 重新启动构建 PC
  • 重新编译所有源代码
  • 检查您的控制台是否有错误和/或异常（显然）
  • 替换TouchableHighlight为TouchableOpacity，重新编译，检查错误是否仍然存在 - 如果不存在，重新交换TouchableOpacity为TouchableHighlight
于 2018-03-16T17:19:31.480 回答
2

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

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>
于 2020-08-10T16:32:01.010 回答
0

对我来说，我需要在 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>
于 2019-05-06T09:11:19.313 回答
0

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

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

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

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

于 2020-11-26T11:12:15.290 回答
0

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

    return <TouchableOpacity
    onPress={handlePress}>
    <Text>Some Text</Text>
</TouchableOpacity >;
于 2018-03-16T04:50:08.677 回答