React Native（React Native Elements）SearchBar 缺少函数 focus() blur()

Question

* 注意 [已解决] *

 [React-Native-Elements][1]
 issue : SearchBar missing functions #877
 soln  : updated react-native-elements package from 1.0.0.0-beta2 -> 1.0.0.0-beta4

基于DOCS，我的目标是能够在搜索栏组件

上调用focus()

<SearchBar
  ref={search => this.search = search}
  onClearText={()=>this.handleOnClearText()}
/>

但是，当我捕获 onClearText() 操作时，我无法调用 :

handleOnClearText = () => {
    if(this.search != null)
        this.search.focus() . //=====> Error here
}

我收到错误：

ExceptionsManager.js:65 TypeError: _this.search.focus is not a function

我可以引用我的 SearchBar 组件，但缺少 focus() 方法。

完整代码：

import React, { Component } from "react";
import {Text,View,StyleSheet,Platform,Keyboard,TextInput} from "react-native";
import {SearchBar} from "react-native-elements";

export default class ContentScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        searchBarText : "",
        dimContent : false
    };
}

static navigationOptions = ({ navigation }) => {
    return {     
        header: navigation.state.params.header ? undefined : 
        navigation.state.params.header,
        title: 'TITLE'
    };
};

handleSearch = () => {
    Keyboard.dismiss();
};

hideHeader = () =>{
    this.props.navigation.setParams({ header: null});
    this.setState({dimContent : true})
}

viewHeader = () =>{
    this.props.navigation.setParams({header: undefined});
    this.setState({dimContent : false})
}

handleContentDimmer= ()=>{
    if(this.state.dimContent){
       return(styles.containerDim)
    }
    else{return(styles.container)}
}

handleChangeText = (searchBarText) => {
    this.setState({
        searchBarText : searchBarText
    })
}

handleCancel = () => {
  this.setState({
    searchBarText : ""
  },()=>{
    this.viewHeader();
  });
}



handleOnClearText(){
    this.setState({
    searchBarText : ""
},()=>{
    if(this.search != null){
        console.log(this.search);
        this.search.focus(); //====================> ERROR HERE
    }})
}

render() {
    if(this.state.searchBarText.length > 1){
        return(
            <View>
            <SearchBar    
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder      ='...Search...'
                returnKeyType    ='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={ searchBarText => this.setState({searchBarText})}
            />
            </View>
        );
    }

    return (
        <View style={this.handleContentDimmer()}>
            <SearchBar
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder="Search..."
                returnKeyType='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={(searchBarText)=>this.handleChangeText(searchBarText)}
            />      
        </View>
    );
  }
}

// ___Styles__
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerDim: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,.2)'
  }
});

Answer 1

由于您使用的是 v1.0.0.beta4, therefore it does'nt support onClearText, you need to replace it with onClear。

此外，由于您已经引用了 this 参数

<SearchBar
  ref={search => this.search = search}
  onClear={()=>this.handleOnClearText()} <== Here
/>

因此不要使用粗箭头函数

handleOnClearText () {
    if(this.search != null)
        this.search.focus()
}

React Native（React Native Elements）SearchBar 缺少函数 focus() blur()

React Native (React Native Elements) SearchBar Missing Functions focus() blur()

focus

searchbar

react-native