Блог

У меня есть текстовый ввод react-native, который я хочу автоматически фокусировать при переходе к экрану (используя навигацию react-native). Я попытался настроить autoFocus={true} ввод текста, но это не сработало.

В другой попытке я попытался сфокусировать его вручную, прослушав событие «фокус» на экране, но оно сфокусировало его только при первом открытии экрана. Есть ли какой-нибудь способ заставить его работать надежно?

 export default function NewAccountScreen({ navigation }) {
  const [name, setName] = useState('');

  const textInputRef = createRef();

  // This isn't working, neither is autoFocus...
  const focusOnInput = () => {
    textInputRef.current?.focus();
  }

  navigation.addListener("focus", focusOnInput);

  return (
    <View>
      <TextInput ref={textInputRef} label="Account name" value={name} onChangeText={setName}/>
    </View>
  )
}
 

используйте React.useRef() вместо createRef();
используйте React.useEffect для прослушивания, когда ref определено, что его можно использовать.

 export default function NewAccountScreen({ navigation }) {
  const [name, setName] = useState('');

  const textInputRef = React.useRef();

  React.useEffect(() => {
     if(textInputRef.current){
        const unsubscribe = navigation.addListener('focus', () => {
          textInputRef.current?.focus()
        });
       return unsubscribe;
     }
  }, [navigation, textInputRef.current]);

  return (
    <View>
      <TextInput ref={textInputRef} label="Account name" value={name} onChangeText={setName}/>
    </View>
  )
}
 

Обновление: как комментарий @pta2002

Я попробовал это, и сейчас он иногда фокусируется, но иногда кажется, что он фокусируется, а затем сразу же расфокусируется…

я тестирую закуску, и, как он сказал, она уже несколько раз не работает!
Действительно, я не могу понять, почему?, но я кое-что пробую, и это работа.

слушайте, чтобы transitionEnd не focus

попробуйте перекусить здесь

   React.useEffect(() => {
    if (textInputRef.current) {
      const unsubscribe = navigation.addListener('transitionEnd', () => {
        textInputRef.current?.focus();
      })

      return unsubscribe;
    }
  }, [navigation, textInputRef.current])
 

другое решение работает для меня, окружая textInputRef.current?.focus(); setTimeout с 1000 мс

   React.useEffect(() => {
    if (textInputRef.current) {
      const unsubscribe = navigation.addListener('focus', () => {
        setTimeout(() => {
           textInputRef.current?.focus();
        }, 1000);
      })

      return unsubscribe;
    }
  }, [navigation, textInputRef.current])