react-native - 如何在 React Native 中取消选择文本组件中的文本？

Question

我正在尝试使用 React Native 制作一个应用程序，它向最终用户显示大量信息。用户可以从应用程序中选择/复制/粘贴信息，这一点至关重要。

Text 的 selectable 属性非常有用，因为它使用原生 android UI 来选择文本。

我唯一的问题是，如果您选择了文本的一部分(有意或无意)，则只有再次点击文本组件内部才能取消选择。也就是说，如果我触摸屏幕上的其他任何地方(任何其他组件所在的位置，甚至是它的父组件)，文本都会一直被选中。

以 React Native 文档中的“Hello World”为例，只需添加 selectable 属性即可:

import React from 'react';
import { Text, View } from 'react-native';

export default function YourApp() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text selectable>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

如果您在 Android 上运行它，您会注意到当您按预期双击(或长按)时确实可以选择和复制。但是除非您再次点击文本的某些部分，否则您将无法取消选择。如果您触摸屏幕的任何其他部分，选择 UI 不会消失。

有办法实现吗？我的应用程序中的 Text 组件太多，长度和大小各不相同。当用户不小心选择了一些东西时，很多人会感到很沮丧，因为点击离开而什么也没有发生。

Answer 1

在这种情况下，我会使用 TouchableWithoutFeedback 组件。

TouchableWithoutFeedback

来自 RN 的示例，其中 alert('Pressed!') 是您删除选择的函数。

function MyComponent(props) {
  return (
    <View {...props} style={{ flex: 1, backgroundColor: '#fff' }}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;