React Native嵌套横向ScrollView在Android端无法滚动，Tinder滑动组件内异常求助

我之前在做类似Tinder的滑动组件时，也碰到过嵌套横向ScrollView在Android上无法滚动的问题——iOS端正常但Android端触摸事件冲突导致滚动失效，用nestedScrollEnabled确实有时候解决不了，给你几个亲测有效的方案：

方案1：让内层ScrollView优先捕获触摸事件 #

Android的触摸事件分发机制和iOS不同，默认情况下外层ScrollView会优先获取触摸事件，导致内层无法响应滚动。我们可以通过手势响应器让内层ScrollView优先处理触摸：

修改内层ScrollView的属性，添加onStartShouldSetResponder和onMoveShouldSetResponder：

import * as React from 'react';
import { Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <ScrollView nestedScrollEnabled={true} horizontal={true} style={{flex:1, alignItems: 'center' }}>
      <ScrollView 
        nestedScrollEnabled={true}
        horizontal={true}
        style={{width: 200,}}
        // 让内层优先响应触摸事件
        onStartShouldSetResponder={() => true}
        onMoveShouldSetResponder={() => true}
      >
        <Text style={{margin: 10}}>test1</Text>
        <Text style={{margin: 10}}>test2</Text>
        <Text style={{margin: 10}}>test3</Text>
        <Text style={{margin: 10}}>test4</Text>
        <Text style={{margin: 10}}>test5</Text>
        <Text style={{margin: 10}}>test6</Text>
        <Text style={{margin: 10}}>test7</Text>
      </ScrollView>
      <Text> Change code in the editor and watch it change on your phone! Save to get a shareable url. </Text>
    </ScrollView>
  );
}

方案2：使用react-native-gesture-handler替代原生ScrollView #

原生ScrollView在跨平台嵌套滚动的处理上有局限性，react-native-gesture-handler提供了更统一的触摸事件处理逻辑，能很好解决Android上的嵌套滚动问题：

1. 先安装依赖：

npm install react-native-gesture-handler

（如果是Expo项目，直接安装即可，不需要额外配置）

2. 替换原生ScrollView为手势库的ScrollView：

import * as React from 'react';
import { Text } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler'; // 替换导入
import Constants from 'expo-constants';

export default function App() {
  return (
    <ScrollView nestedScrollEnabled={true} horizontal={true} style={{flex:1, alignItems: 'center' }}>
      <ScrollView nestedScrollEnabled={true} horizontal={true} style={{width: 200,}}>
        <Text style={{margin: 10}}>test1</Text>
        <Text style={{margin: 10}}>test2</Text>
        <Text style={{margin: 10}}>test3</Text>
        <Text style={{margin: 10}}>test4</Text>
        <Text style={{margin: 10}}>test5</Text>
        <Text style={{margin: 10}}>test6</Text>
        <Text style={{margin: 10}}>test7</Text>
      </ScrollView>
      <Text> Change code in the editor and watch it change on your phone! Save to get a shareable url. </Text>
    </ScrollView>
  );
}

方案3：避免同方向嵌套ScrollView（推荐） #

如果你的业务场景允许，尽量避免嵌套同方向的ScrollView（比如外层横向、内层也横向），这种结构本身就容易引发触摸冲突。可以调整布局，把内层的横向内容和外层的其他元素整合到同一个ScrollView中，或者改用FlatList来实现复杂的列表布局——FlatList在处理嵌套和性能上都更优。

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