低版本Android中TextInput输入长文本致Horizontal ScrollView自动滚动UI异常

这个问题我之前维护React Native老项目时也碰到过，本质是低版本Android系统里，ScrollView会自动尝试滚动到获得焦点的TextInput位置，和pagingEnabled的分页逻辑冲突，导致布局错乱。给你几个亲测有效的解决方案：

方案一：禁用TextInput自身滚动（最简单） #

你的TextInput高度固定为100，不需要内部滚动，直接禁用它的滚动功能，就能阻止系统触发父ScrollView的自动滚动：

<TextInput
  style={{ width, backgroundColor: '#FFF', height: 100 }}
  scrollEnabled={false}
/>

方案二：强制锁定ScrollView到当前页面 #

如果方案一没生效，可以通过useRef获取ScrollView实例，在TextInput获取焦点或内容变化时，强制滚动回当前页面的位置，避免偏移：

import React, { useRef, useState } from 'react';
import { ScrollView, View, TextInput, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

export default function PagedTabs() {
  const scrollViewRef = useRef(null);
  const [currentPage, setCurrentPage] = useState(0);

  // 记录滚动结束后的当前页码
  const handleScrollEnd = (event) => {
    const pageIndex = Math.round(event.nativeEvent.contentOffset.x / width);
    setCurrentPage(pageIndex);
  };

  // 强制滚动回当前页面位置
  const resetScrollPos = () => {
    scrollViewRef.current?.scrollTo({
      x: currentPage * width,
      animated: false,
    });
  };

  return (
    <ScrollView
      ref={scrollViewRef}
      showsHorizontalScrollIndicator={false}
      style={{ flex: 1 }}
      contentContainerStyle={{ height: '100%' }}
      pagingEnabled
      horizontal
      onMomentumScrollEnd={handleScrollEnd}
    >
      <View style={{ width, backgroundColor: 'red' }}>
        <TextInput
          style={{ width, backgroundColor: '#FFF', height: 100 }}
          onFocus={resetScrollPos}
          onContentSizeChange={resetScrollPos}
        />
      </View>
      <View style={{ width, backgroundColor: 'green' }} />
      <View style={{ width, backgroundColor: 'blue' }} />
    </ScrollView>
  );
}

方案三：用FlatList替代ScrollView实现分页 #

React Native的FlatList在分页逻辑上的实现比ScrollView更稳定，尤其是低版本Android，能从根源避免这类滚动冲突问题：

import React from 'react';
import { FlatList, View, TextInput, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const pageData = [
  { id: 'page1', color: 'red', hasInput: true },
  { id: 'page2', color: 'green', hasInput: false },
  { id: 'page3', color: 'blue', hasInput: false },
];

export default function PagedTabs() {
  const renderPage = ({ item }) => (
    <View style={{ width, backgroundColor: item.color }}>
      {item.hasInput && (
        <TextInput style={{ width, backgroundColor: '#FFF', height: 100 }} />
      )}
    </View>
  );

  return (
    <FlatList
      data={pageData}
      renderItem={renderPage}
      keyExtractor={item => item.id}
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
      scrollEventThrottle={16}
    />
  );
}

建议先试方案一，最快见效；如果还是有问题，再尝试方案二或方案三，FlatList的方案更适合长期维护。

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