自动焦点属性在 React Native 的文本输入组件中不起作用

Posted 2023-04-18

【中文标题】自动焦点属性在 React Native 的文本输入组件中不起作用

【英文标题】：Auto Focus Property is not working in Text Input Component on React Native

【发布时间】：2021-10-15 10:28:02

【问题描述】：

我正在制作一个搜索栏，我希望在单击“搜索”按钮后打开键盘，但是 TextInput 的 autoFocus 属性不起作用。我做错了什么？

代码如下：

const SearchBar = () => 
    return (
        <View style= flex: 1 >
            <TextInput placeholder="Search"
                style= width: Dimensions.get('screen').width, height: 50, borderWidth: 1, 
                borderRadius: 20 
                autoFocus=true 
            /> 
        </View>
     )


const Search = () => 
    return (
        <TouchableWithoutFeedback onPress=()=>Keyboard.dismiss() >
            <SearchBar />
       </TouchableWithoutFeedback>
    )
 

【参考方案1】：

嗯，理想情况下，autoFocus 应该可以安装这个组件。

如果不是，解决方法是显式添加一个 ref 并聚焦它

class ABC extends .. 

constructor(props)
...
this.textInput = React.createRef();



componentDidMount()
this.textInput.current.focus();


 SearchBar = () => 
    return (
        <View style= flex: 1 >
            <TextInput placeholder="Search"
                style= width: Dimensions.get('screen').width, height: 50, borderWidth: 1, 
                borderRadius: 20 
                autoFocus=true 
ref=this.textInput
            /> 
        </View>
     )