RN使用js让输入框取消和获取焦点(及键盘的监听)

1.自动获取焦点

<TextInput
  style={{
    width: 90,
    paddingLeft: 20,
  }}
  autoFocus={true} // 自动获取焦点
  onChangeText={text => setText(text)}
  value={text}
/>

2.取消焦点

import React, { useRef } from 'react';
import {TextInput,Button} from 'react-native';
export default function App(){
	const inputRef = useRef(null);
	const [text,setText]=useState('')
	const btnClick = ()=>{
		inputRef.current.blur(); // 取消焦点
	}

	return(
		<TextInput
 		 ref={inputRef} // 设置引用
 		 style={{
 		   width: 90,
 		   paddingLeft: 20,
 		 }}
 		 onChangeText={text => setText(text)}
 		 value={text}
		/>

		<Button
 		 onPress={btnClick}
		>
	)
}
 

3.监听键盘收起移除焦点

import React, { useRef } from 'react';
import {TextInput, Button, Keyboard} from 'react-native';
export default function App(){
	const inputRef = useRef(null);
	const [text,setText]=useState('')

	useEffect(() => {
  		const keyboardDidHideListener = Keyboard.addListener(
    		'keyboardDidHide',
    		() => {
      		// 在这里执行键盘收起时的操作
      		console.log('键盘已隐藏');
      		// 例如，取消焦点
      		inputRef.current.blur();
   		 }
  		);

  		// 注意：在组件卸载时记得移除监听器，以避免内存泄漏
 		 return () => {
   		 keyboardDidHideListener.remove();
 		 };
	}, []);

	return(
		<TextInput
 		 ref={inputRef} // 设置引用
 		 style={{
 		   width: 90,
 		   paddingLeft: 20,
 		 }}
 		 onChangeText={text => setText(text)}
 		 value={text}
		/>
	)
}