React Native中TextInput焦点异常问题求助

Hey there! Let's break down this autoFocus issue you're facing—it's a super common gotcha with nested navigators in React Native, especially when dealing with how components are cached and reactivated.

What's Going On Here? #

The autoFocus prop on your TextInput only triggers once when the component first mounts. By default, React Navigation's TabNavigator (BottomTabNavigator) caches tab components after their first mount—so when you switch back to AddUser from Home after only visiting the user summary, the component is already mounted, and autoFocus won't fire again.

When you go all the way into the user detail page and return twice, you're likely triggering a full reset of the Home tab's navigation stack, which might force the AddUser tab component to remount (hence autoFocus works again). But that's not a reliable fix—we need a consistent way to trigger focus every time the tab is selected.

The Fix: Manual Focus via Navigation Events #

Instead of relying solely on autoFocus, we'll listen for when the AddUser tab gains focus, then manually tell the TextInput to focus. Here's how to implement this in your class component:

1. Add navigation focus listeners in your AddUser component's lifecycle methods:

componentDidMount() {
  // Listen for when the screen comes into focus
  this.focusListener = this.props.navigation.addListener('focus', () => {
    // If the TextInput ref exists, trigger focus
    if (this.textUser) {
      this.textUser.focus();
    }
  });
}

componentWillUnmount() {
  // Clean up the listener when the component unmounts
  this.focusListener();
}

2. Adjust your TextInput (you can remove autoFocus now, since we're handling focus manually):

<TextInput 
  style={styles.inputText} 
  placeholder="Type username here" 
  ref={input => { this.textUser = input }} 
  value={this.state.user} 
  onChangeText={(user) => this.setState({user})} 
/>

3. Ensure navigation props are available: If your AddUser component isn't receiving the navigation prop (common with nested navigators), wrap it with the withNavigation HOC:

import { withNavigation } from 'react-navigation';

class AddUser extends React.Component {
  // Your component code here
}

export default withNavigation(AddUser);

Why This Works #

The focus event from React Navigation fires every time the tab is selected, regardless of whether the component was already mounted. This guarantees that your TextInput will get focus every time you switch to the AddUser tab—no matter how you navigate back to Home first.

Quick Check: Tab Navigator Lazy Mode #

Just to rule out another edge case: if you've set lazy: false in your TabNavigator config, all tab components mount upfront. Even then, the autoFocus prop won't re-trigger on tab switches, so the focus listener approach is still the right solution.

Hope this fixes your issue—happy coding!

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