Question

重点关注 TextInput 上的焦点反应导航

2020-11-11

882

react-native react-navigation

我有一个 OTP 屏幕，我已向第一个 TextInput 字段添加了一个引用，以便在屏幕加载时，它会获得焦点：

// ref
const pin1 = useRef();

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

但它返回一个错误： TypeError：undefined 不是对象（评估“pin1.current.focus”）

此代码运行良好：

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

Answer 1

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

检查 autoFocus

Answer 2

您应该在调用任何功能之前检查当前对象。

520168341

asaeed

2020-11-11

Answer 3

将监听器嵌入到 useEffect

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

也

<TextInput ref={pin1} />

中