React Native - 为ios或android做一个搜索栏

Question

我一直在搜索ios和android的搜索栏组件，以便我可以在我的应用中使用。到目前为止，我没有找到，这就是我想制作一个的原因。单击按钮时如何显示视图？因此，当他们单击搜索图标时，会出现搜索栏。或者以任何方式做搜索栏？ 谢谢！

Answer 1

Internet `

上提供了许多教程

其中一些

var SearchBar = require（'react-native-search-bar'）;

和

<SearchBar
ref='searchBar'
placeholder='Search'
onChangeText={...}
onSearchButtonPress={...}
onCancelButtonPress={...}
/>

一些有用的链接

• https://github.com/umhan35/react-native-search-bar

• https://www.npmjs.com/package/react-native-search

• https://github.com/StevenIseki/react-native-search/tree/master/SearchBarExample
• https://www.briandouglas.me/2016/02/08/searching-data-in-react-native

Answer 2

react-native-elements 1.0.0-beta5包含iOS和Android搜索栏的组件。当前版本的SearchBar也适用于Android，但没有Android风格。

npm install --save react-native-elements@1.0.0-beta5

<SearchBar
   showLoading
   platform="android"
   placeholder='Search' />

然后它看起来像这样：

Answer 3

npm i react-native-element --save
//code here
state = {
 search: '',
};
updateSearch = search => {
  this.setState({search});
};
.... // some things here
<SearchBar
      onChangeText={this.updateSearch}
      value={search}
      lightTheme
      round
      showLoading
      placeholder="Search"
      icon={{type: 'font-awesome', name: 'search'}}
      cancelIcon={{type: 'font-awesome', name: 'cancelIcon'}}
      leftIconContainerStyle
      inputStyle={{backgroundColor: 'white'}}
      placeholderTextColor={'#g5g5g5'}
      platform="ios"
      cancelButtonTitle="Cancel"
      containerStyle={{
        backgroundColor: 'white',
        borderWidth: 0,
        borderRadius: 100,
      }}
      cancelButtonProps={{
        color: 'red', //color of text: Cancel
      }}
    />