如何在React Native(Expo托管)中实现类Twitter个人资料页并解决滚动问题？

你遇到的核心问题是垂直滚动容器嵌套时的触摸事件冲突——外层垂直ScrollView会优先拦截滚动手势，导致内层FlatList无法响应滚动操作。下面提供两种可行的解决方法：

方法一：开启嵌套滚动支持（快速修复） #

给每个内层的垂直FlatList添加nestedScrollEnabled={true}属性，这个React Native原生属性允许嵌套的滚动容器正常响应滚动事件：

import { ScrollView, FlatList, View, TouchableOpacity, Text, Dimensions } from 'react-native';
import { useState } from 'react';

export default function ProfileScreen() {
  const [activeTab, setActiveTab] = useState(0);
  const category1Data = [/* 你的分类1数据 */];
  const category2Data = [/* 你的分类2数据 */];

  const Item = ({item}) => <View style={{height: 80, margin: 10, backgroundColor: '#eee'}}><Text>{item.content}</Text></View>;

  return (
    <ScrollView style={{flex: 1}}>
      {/* 顶部个人资料区域 */}
      <View style={{height: 200, backgroundColor: '#1da1f2', justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{color: 'white', fontSize: 20}}>个人资料</Text>
      </View>

      {/* 横向分类切换栏 */}
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{borderBottomWidth: 1, borderColor: '#eee'}}>
        <TouchableOpacity onPress={() => setActiveTab(0)} style={{padding: 15}}>
          <Text style={activeTab === 0 ? {color: '#1da1f2', fontWeight: 'bold'} : {color: '#666'}}>分类1</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setActiveTab(1)} style={{padding: 15}}>
          <Text style={activeTab === 1 ? {color: '#1da1f2', fontWeight: 'bold'} : {color: '#666'}}>分类2</Text>
        </TouchableOpacity>
      </ScrollView>

      {/* 横向内容容器，控制切换显示对应分类 */}
      <ScrollView 
        horizontal 
        pagingEnabled={true} 
        scrollEnabled={false} 
        style={{flex: 1}}
        contentOffset={{x: activeTab * Dimensions.get('window').width}}
      >
        {/* 分类1的FlatList */}
        <FlatList
          data={category1Data}
          renderItem={Item}
          keyExtractor={(item) => item.id}
          nestedScrollEnabled={true} // 开启嵌套滚动
          style={{width: Dimensions.get('window').width}}
        />

        {/* 分类2的FlatList */}
        <FlatList
          data={category2Data}
          renderItem={Item}
          keyExtractor={(item) => item.id}
          nestedScrollEnabled={true} // 开启嵌套滚动
          style={{width: Dimensions.get('window').width}}
        />
      </ScrollView>
    </ScrollView>
  );
}

方法二：重构布局避免嵌套滚动（推荐方案） #

彻底去掉外层垂直ScrollView，用单个FlatList承载整个页面内容，将顶部资料区和分类切换栏作为FlatList的ListHeaderComponent，通过切换Tab动态改变FlatList的数据源。这种方式从根源上避免了滚动嵌套，性能更优：

import { FlatList, View, TouchableOpacity, Text, ScrollView } from 'react-native';
import { useState } from 'react';

export default function ProfileScreen() {
  const [activeTab, setActiveTab] = useState(0);
  const category1Data = [/* 你的分类1数据 */];
  const category2Data = [/* 你的分类2数据 */];
  const currentData = activeTab === 0 ? category1Data : category2Data;

  const Item = ({item}) => <View style={{height: 80, margin: 10, backgroundColor: '#eee'}}><Text>{item.content}</Text></View>;

  return (
    <FlatList
      data={currentData}
      renderItem={Item}
      keyExtractor={(item) => item.id}
      ListHeaderComponent={() => (
        <>
          {/* 顶部个人资料区域 */}
          <View style={{height: 200, backgroundColor: '#1da1f2', justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'white', fontSize: 20}}>个人资料</Text>
          </View>

          {/* 横向分类切换栏 */}
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{borderBottomWidth: 1, borderColor: '#eee'}}>
            <TouchableOpacity onPress={() => setActiveTab(0)} style={{padding: 15}}>
              <Text style={activeTab === 0 ? {color: '#1da1f2', fontWeight: 'bold'} : {color: '#666'}}>分类1</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setActiveTab(1)} style={{padding: 15}}>
              <Text style={activeTab === 1 ? {color: '#1da1f2', fontWeight: 'bold'} : {color: '#666'}}>分类2</Text>
            </TouchableOpacity>
          </ScrollView>
        </>
      )}
    />
  );
}

补充说明 #

• 方法一适合快速修复现有布局，但嵌套滚动在部分Android设备上可能存在轻微的手势响应延迟；
• 方法二是更符合React Native最佳实践的方案，不仅解决滚动问题，还能提升页面整体性能，减少不必要的视图层级。

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