React Native Pager View切换页面时保持键盘常显问题求助

方案1：手动控制焦点切换（推荐） #

移除每个TextInput的autoFocus属性，改用PagerView的页面切换回调主动切换焦点，避免旧输入框失焦导致键盘关闭。

步骤：

• 用useRef存储每个页面TextInput的引用
• 在PagerView的onPageSelected回调中，根据当前选中的页面索引，调用对应TextInput的focus()方法

代码示例：

import React, { useRef } from 'react';
import { View, TextInput } from 'react-native';
import PagerView from 'react-native-pager-view';

const RegisterForm = () => {
  const inputRefs = useRef([
    React.createRef(),
    React.createRef(),
    React.createRef()
  ]);

  const handlePageSelected = (e) => {
    const index = e.nativeEvent.position;
    inputRefs.current[index]?.current?.focus();
  };

  return (
    <PagerView
      style={{ flex: 1 }}
      initialPage={0}
      onPageSelected={handlePageSelected}
    >
      <View key="page1">
        <TextInput
          ref={inputRefs.current[0]}
          placeholder="输入手机号"
          keyboardType="phone-pad"
        />
      </View>
      <View key="page2">
        <TextInput
          ref={inputRefs.current[1]}
          placeholder="输入验证码"
          keyboardType="number-pad"
        />
      </View>
      <View key="page3">
        <TextInput
          ref={inputRefs.current[2]}
          placeholder="设置密码"
          secureTextEntry
        />
      </View>
    </PagerView>
  );
};

export default RegisterForm;

方案2：阻止键盘自动关闭 #

利用React Native的Keyboard API，在页面切换时临时阻止键盘隐藏，配合手动聚焦新页面的输入框。

代码示例：

import React, { useEffect, useRef } from 'react';
import { View, TextInput, Keyboard } from 'react-native';
import PagerView from 'react-native-pager-view';

const RegisterForm = () => {
  let preventKeyboardHide = useRef(false);
  const inputRefs = useRef([
    React.createRef(),
    React.createRef(),
    React.createRef()
  ]);

  useEffect(() => {
    const subscription = Keyboard.addListener('keyboardWillHide', (e) => {
      if (preventKeyboardHide.current) {
        e.preventDefault();
        preventKeyboardHide.current = false;
      }
    });

    return () => subscription.remove();
  }, []);

  const handlePageScrollStateChanged = (e) => {
    // 页面开始拖动时，标记阻止键盘关闭
    if (e.nativeEvent.pageScrollState === 'dragging') {
      preventKeyboardHide.current = true;
    }
  };

  const handlePageSelected = (e) => {
    const index = e.nativeEvent.position;
    inputRefs.current[index]?.current?.focus();
  };

  return (
    <PagerView
      style={{ flex: 1 }}
      initialPage={0}
      onPageScrollStateChanged={handlePageScrollStateChanged}
      onPageSelected={handlePageSelected}
    >
      <View key="page1">
        <TextInput
          ref={inputRefs.current[0]}
          placeholder="输入手机号"
          keyboardType="phone-pad"
          autoFocus={true}
        />
      </View>
      <View key="page2">
        <TextInput
          ref={inputRefs.current[1]}
          placeholder="输入验证码"
          keyboardType="number-pad"
        />
      </View>
      <View key="page3">
        <TextInput
          ref={inputRefs.current[2]}
          placeholder="设置密码"
          secureTextEntry
        />
      </View>
    </PagerView>
  );
};

export default RegisterForm;

方案3：保持所有子页面挂载 #

如果PagerView默认会卸载未显示的页面，导致输入框失焦，可以让所有子页面保持挂载，仅通过样式控制显示/隐藏，避免组件卸载引发的焦点丢失。

代码示例：

import React, { useState, useRef } from 'react';
import { View, TextInput } from 'react-native';
import PagerView from 'react-native-pager-view';

const RegisterForm = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const inputRefs = useRef([
    React.createRef(),
    React.createRef(),
    React.createRef()
  ]);

  const handlePageSelected = (e) => {
    const index = e.nativeEvent.position;
    setCurrentPage(index);
    inputRefs.current[index]?.current?.focus();
  };

  return (
    <View style={{ flex: 1 }}>
      {/* 自定义页面容器，保持所有页面挂载 */}
      <View style={{ flex: 1, position: 'relative' }}>
        {[0,1,2].map(index => (
          <View
            key={`page-${index}`}
            style={{
              position: 'absolute',
              inset: 0,
              opacity: currentPage === index ? 1 : 0,
              pointerEvents: currentPage === index ? 'auto' : 'none'
            }}
          >
            <TextInput
              ref={inputRefs.current[index]}
              placeholder={
                index ===0 ? '输入手机号' : 
                index ===1 ? '输入验证码' : '设置密码'
              }
              keyboardType={index !==2 ? 'number-pad' : 'default'}
              secureTextEntry={index ===2}
              autoFocus={index ===0}
            />
          </View>
        ))}
      </View>
      {/* 仅用PagerView处理滑动手势，不渲染实际页面 */}
      <PagerView
        style={{ position: 'absolute', inset:0, opacity:0 }}
        initialPage={0}
        onPageSelected={handlePageSelected}
        pageCount={3}
      />
    </View>
  );
};

export default RegisterForm;

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