Question

我正在使用标签栏导航，并且有一个名为“搜索”的标签。当我去搜索屏幕时，我需要自动聚焦到 TextInput。第一次运行正常。如果我转到另一个选项卡并再次返回搜索屏幕，则它不起作用。我不使用 componentDidMount 那么还有其他方法吗？

这是使用效果

useEffect(() => {
    return null;
  }, []);

这里是来自 nativeBase 的 textInput

<Input
          placeholder={'Ürün ara'}
          value={barcodes}
          onChangeText={text => onChangeText(text)}
          onSubmitEditing={event => {
            if (event.nativeEvent.text.length === 13) {
              getir(event.nativeEvent.text);
            }
          }}
          keyboardType="number-pad"
          autoFocus
          blurOnSubmit={false}
          contextMenuHidden={true}
          maxLength={13}
          style={{
            paddingRight: dimensions.width * 0.125,
            paddingLeft: dimensions.width * 0.03,
          }}
        />

Answer 1

您可以使用 ref 来聚焦您的 TextInput

const inputRef = useRef(null);
const onFocusHandler = () => {
 inputRef.current && inputRef.current.focus();
}
useEffect(() => {
    onFocusHandler();
}, []);

return (
 <>
  <Input 
          ref={inputRef} 
          placeholder={'Ürün ara'}
          value={barcodes}
          onChangeText={text => onChangeText(text)}
          onSubmitEditing={event => {
            if (event.nativeEvent.text.length === 13) {
              getir(event.nativeEvent.text);
            }
          }}
          keyboardType="number-pad"
          autoFocus={true}
          onFocus={onFocusHandler}
          blurOnSubmit={false}
          contextMenuHidden={true}
          maxLength={13}
          style={{
            paddingRight: dimensions.width * 0.125,
            paddingLeft: dimensions.width * 0.03,
          }}
  />
 </>
)

在功能组件中反应原生 TextInput autoFocus

1 个答案: