React Native 嵌套在ScrollView内的Text组件selectable属性失效如何解决

根因说明 #

ScrollView默认的手势响应器优先级高于内部子组件，长按触发文本选择的手势会被ScrollView优先拦截，导致Text的selectable属性无法生效。

可行方案 #

方案1：调整ScrollView滚动开关 #

如果业务场景允许用户和文本交互时暂时禁用滚动，可以通过状态控制scrollEnabled属性：

const [scrollEnabled, setScrollEnabled] = useState(true);

// 组件渲染部分
<ScrollView scrollEnabled={scrollEnabled}>
  <Text 
    selectable
    onLongPress={() => setScrollEnabled(false)}
    onPressOut={() => setScrollEnabled(true)}
  >
    需要支持选中的文本内容
  </Text>
</ScrollView>

该方案适配绝大多数场景，不会影响其余滚动交互逻辑。

方案2：修改子组件的手势响应优先级 #

给Text外层包裹一个View，手动声明该区域的手势响应优先级高于父级ScrollView：

<ScrollView>
  <View onStartShouldSetResponder={() => true}>
    <Text selectable>
      需要支持选中的文本内容
    </Text>
  </View>
</ScrollView>

该方案不需要修改ScrollView的滚动属性，适合页面内仅部分Text需要支持选中的场景。

方案3：修改ScrollView全局手势配置 #

如果页面内大量Text需要支持选中，可以给ScrollView添加对应平台的专属配置：

<ScrollView 
  cancelable={true} // Android端允许手势被子组件中断
  alwaysBounceVertical={false} // iOS端临时关闭回弹效果减少手势冲突
>
  {/* 内部所有带selectable属性的Text都可正常触发选中 */}
</ScrollView>

注意事项 #

• 不要同时嵌套多层ScrollView，否则会进一步加剧手势冲突
• 如果使用的是第三方封装的ScrollView组件，优先检查组件内部是否默认关闭了子组件的手势透传

内容的提问来源于stack exchange，提问作者lil_dippa