按下搜索圖標后如何展開搜索欄

Question

我通過某種方式創建了一個搜索圖標，我只是想知道當有人按下搜索欄圖標時如何展開它。

  import { TouchableOpacity,View, Image} from 'react-native';
  import { SearchBar } from 'react-native-elements';
  export default class Search extends Component{
     onClick(){
      return <SearchBar/> // [![Seach Image][1]][1]not working
}

render(){
    // not worrking
    let search = <SearchBar/>;
    return(
        <View>
            <TouchableOpacity
                onPress={() => {
                    return search
                }}
            >
                <Image
                    source={require('../images/tabs/search.png')}
                    style={{height: 40, width: 60}}
                    resizeMode={'contain'}
                />
            </TouchableOpacity>
        </View>
     )
   }
 }

Answer 1

您應該在組件中添加狀態以控制標題的行為

import { TouchableOpacity, View, Image } from 'react-native';
import { SearchBar } from 'react-native-elements';
export default class Search extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      showSearchBar: false, // control what ever to render the searchbar or just the icon
    };
  }
  onClick() {
    let { showSearchBar } = this.state;
    this.setState({
      showSearchBar: !showSearchBar,
    });
  }

  render() {
    const { showSearchBar } = this.state;
    return (
      <View>
        {!showSearchBar ? (
          <TouchableOpacity onPress={this.onClick}>
            <Image
              source={require('../images/tabs/search.png')}
              style={{ height: 40, width: 60 }}
              resizeMode={'contain'}
            />
          </TouchableOpacity>
        ) : (
          <SearchBar />
        )}
      </View>
    );
  }
}