React Native中FlatList内双视图的高度与滚动独立控制方法

问题根源 #

你当前的实现把横向ScrollView嵌套在FlatList中，FlatList的item高度复用机制会强制所有子视图高度统一，同时单个scrollRef无法区分不同标签页的滚动状态，导致切换时出现自动滚动和高度一致的问题。

解决方案 #

通过以下修改让两个视图的高度和滚动完全独立：

• 移除外层FlatList，改用普通View布局Header和横向ScrollView，解除高度限制
• 给每个标签页内部添加独立的纵向ScrollView，维护各自的滚动状态
• 修正滚动指示器的动画逻辑，确保标签切换时指示器移动正确

修改后的完整代码 #

import {
  View,
  Text,
  SafeAreaView,
  ScrollView,
  StatusBar,
  TouchableOpacity,
  Dimensions,
} from "react-native";
import React, { useRef } from "react";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";

const deviceWidth = Dimensions.get("window").width;

export default function () {
  const scrollRef = useRef();
  const scrollX = useSharedValue(0);

  const scrollXAnimateStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: scrollX.value,
        },
      ],
    };
  });

  const View1 = () => {
    return (
      <View style={{ backgroundColor: "lime", width: deviceWidth }}>
        {/* 独立的纵向ScrollView */}
        <ScrollView bounces={false}>
          <Text style={{ fontSize: 35 }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, quos
            incidunt consequatur voluptas labore recusandae sapiente dolorum
            voluptatibus eaque harum esse. Maxime veniam cum suscipit ipsum
            laudantium officiis dolore! Dicta.
            {"\n\n\n"}
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, quos
            incidunt consequatur voluptas labore recusandae sapiente dolorum
            voluptatibus eaque harum esse. Maxime veniam cum suscipit ipsum
            laudantium officiis dolore! Dicta.
          </Text>
        </ScrollView>
      </View>
    );
  };

  const View2 = () => {
    return (
      <View style={{ backgroundColor: "cyan", width: deviceWidth }}>
        {/* 独立的纵向ScrollView */}
        <ScrollView bounces={false}>
          <Text style={{ fontSize: 20 }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, quos
            incidunt consequatur voluptas labore recusandae sapiente dolorum
            voluptatibus eaque harum esse. Maxime veniam cum suscipit ipsum
            laudantium officiis dolore! Dicta.
          </Text>
        </ScrollView>
      </View>
    );
  };

  const HeaderCom = () => {
    return (
      <View>
        <View
          style={{
            height: 50,
            backgroundColor: "yellow",
            flexDirection: "row",
          }}
        >
          <TouchableOpacity
            style={{
              width: deviceWidth / 2,
              height: 50,
              justifyContent: "center",
              alignItems: "center",
            }}
            onPress={() => {
              scrollRef.current?.scrollTo({ x: 0, animated: true });
            }}
          >
            <Text>View 1</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              width: deviceWidth / 2,
              height: 50,
              justifyContent: "center",
              alignItems: "center",
            }}
            onPress={() => {
              scrollRef.current?.scrollTo({ x: deviceWidth, animated: true });
            }}
          >
            <Text>View 2</Text>
          </TouchableOpacity>
        </View>
        <Animated.View
          style={[
            {
              height: 3,
              backgroundColor: "black",
              width: deviceWidth / 2,
            },
            scrollXAnimateStyle,
          ]}
        ></Animated.View>
      </View>
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <HeaderCom />
      <ScrollView
        ref={scrollRef}
        bounces={false}
        horizontal
        pagingEnabled
        scrollEventThrottle={16}
        onScroll={(event) => {
          // 修正指示器动画计算，直接使用contentOffset.x
          scrollX.value = event.nativeEvent.contentOffset.x;
        }}
      >
        <View1 />
        <View2 />
      </ScrollView>
    </SafeAreaView>
  );
}

关键修改说明 #

1. 移除FlatList：原本的FlatList是多余的，直接用View布局Header和横向ScrollView，让横向ScrollView可以自适应内部内容的高度，不再被FlatList的item高度限制。
2. 独立纵向ScrollView：每个标签页内部添加自己的ScrollView，这样两个页面的滚动状态完全独立，切换标签时不会互相干扰。
3. 修正指示器动画：把scrollX.value = event.nativeEvent.contentOffset.x / 2改为scrollX.value = event.nativeEvent.contentOffset.x，确保指示器能准确跟随标签页切换移动。

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