Question

我有一个OTP屏幕，我在第一个TextInput字段中添加了一个引用，以便在屏幕加载时将其聚焦：

// ref
const pin1 = useRef();

// navigation listener
navigation.addListener('focus', () => {
     pin1.current.focus();
})

但是它返回一个错误： TypeError: undefined is not an object (evaluating 'pin1.current.focus')

此代码效果很好：

navigation.addListener('focus', () => {
     alert('Hello')
})

Answer 1

我认为您应该在autoFocus={true}与TextInput一起使用时打开屏幕，使TextInput自动聚焦。

选中autoFocus

Answer 2

在调用任何函数之前，应检查当前对象。

navigation.addListener('focus', () => {
      if (pin1.current) {
        pin1.current.focus();
      }
    });

Answer 3

将监听器嵌入useEffect

中

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

也

<TextInput ref={pin1} />

专注于TextInput专注于焦点反应导航

3 个答案: