React Native栈导航下TextInput自动失焦问题求助

我之前碰到过完全一样的问题，这大概率是DrawerNavigator和StackNavigator嵌套时的焦点管理冲突导致的。当页面不在栈顶时，Drawer的容器或者Stack的后台页面优化会抢夺TextInput的焦点，进而导致键盘自动收起。结合你的代码，我给你几个可行的解决方案：

1. 修正拼写错误+添加焦点监听（最直接的方案） #

首先你代码里的blurOnSumbit是拼写错误，应该是blurOnSubmit——虽然这不是核心问题，但先修正避免其他潜在问题。然后我们通过导航的焦点监听，在页面重新回到前台时让输入框重新聚焦：

import React, {Component} from 'react';
import {View, TextInput, StyleSheet} from 'react-native';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    // 监听页面获得焦点的事件，确保回到页面时输入框能保持焦点
    this.focusSubscription = this.props.navigation.addListener('didFocus', () => {
      // 延迟100ms确保视图渲染完成，再聚焦
      setTimeout(() => {
        this.inputRef.current?.focus();
      }, 100);
    });
  }

  componentWillUnmount() {
    // 记得移除监听，避免内存泄漏
    this.focusSubscription.remove();
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput 
          ref={this.inputRef}
          style={styles.test} 
          placeholder={"Test"} 
          onBlur={() => console.log("Input Blurred!")} 
          blurOnSubmit={false} // 修正拼写错误
        />
      </View>
    )
  }

  // 可选：在Test页面禁用Drawer手势，避免Drawer抢夺焦点
  static navigationOptions = {
    drawerLockMode: 'locked-closed',
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center', // 你之前用的alignContent改成alignItems，才能让输入框水平居中
    justifyContent: 'center'
  },
  test: {
    height: 100,
    width:200,
    borderColor: '#000000',
    borderWidth: 2,
    paddingHorizontal: 10 // 加个内边距，输入体验更好
  }
});

2. 调整导航结构（从根源避免冲突） #

旧版本React Navigation（你用的是v4）里，Drawer嵌套Stack很容易出现焦点管理问题。可以把导航结构反过来，让Stack作为根容器，Drawer作为Stack里的一个页面：

// App.js
const AppDrawerNavigator = createDrawerNavigator({ 
  Home: {screen: CarouselScreen},
  Test: {screen: Test},
});

const AppStackNavigator = createStackNavigator({
  SplashScreen: {screen: SplashScreen},
  Drawer: {screen: AppDrawerNavigator},
}, { transitionConfig });

const AppContainer = createAppContainer(AppStackNavigator);

这样Stack的焦点管理会优先处理，减少嵌套带来的冲突。

3. 用Keyboard模块阻止键盘自动收起 #

如果上面的方案还不行，可以监听键盘的隐藏事件，当输入框应该保持焦点时，强制重新聚焦：

import {Keyboard} from 'react-native';

// 在Test组件里添加
componentDidMount() {
  this.keyboardListener = Keyboard.addListener('keyboardWillHide', (e) => {
    // 你可以自定义一个状态，比如isInputFocused，判断是否要阻止键盘收起
    if (this.state.isInputFocused) {
      e.preventDefault();
      this.inputRef.current?.focus();
    }
  });
}

componentWillUnmount() {
  this.keyboardListener.remove();
}

记得在TextInput的onFocus和onBlur里更新isInputFocused的状态哦。

问题根源解释 #

当页面处于Stack的非顶部位置时，React Navigation可能会对后台页面进行组件卸载/优化，或者Drawer的容器在页面切换时触发了全局焦点变化，导致TextInput失去焦点。旧版本的嵌套导航在焦点管理上确实存在一些坑，手动管理焦点或者调整结构是最有效的解决方式。

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