按下搜索图标后如何展开搜索栏

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>
    );
  }
}