在 React Native 中添加 SearchBar

在 React Native 应用中添加 SearchBar 是常见的需求，为了方便用户搜索相关信息，我们可以使用 React Native 中提供的 TextInput 组件来实现此功能。

步骤

1. 创建一个 TextInput 组件

首先，在你的组件中创建一个 TextInput 组件，用于输入搜索关键字，设置 placeholder 属性为 “Search”，并在 onChangeText 属性中设置一个回调函数，以便我们在用户输入时做出相应的处理。

<TextInput
  style={styles.searchBar}
  placeholder="Search"
  onChangeText={text => console.log(text)}
/>

2. 定义样式

为了让搜索栏看起来更漂亮，我们需要定义一些样式。在你的组件中定义一个样式对象，例如：

const styles = StyleSheet.create({
  searchBar: {
    height: 40,
    margin: 10,
    borderWidth: 1,
    paddingLeft: 10,
    borderRadius: 20,
  },
});

这个样式对象定义了搜索栏的高度、边框宽度、内边距和边框半径。

3. 响应用户输入

当用户开始输入搜索关键字时，我们需要在 TextInput 的 onChangeText 回调函数中获取用户输入的文本，并在使用它进行搜索或者是过滤操作时用到。例如：

class SearchBar extends React.Component {
  state = {
    searchTerm: '',
  };

  handleSearch = searchTerm => {
    this.setState({ searchTerm });
    console.log('Search term:', searchTerm);
    // 可以在这里进行搜索或过滤操作
  };

  render() {
    return (
      <TextInput
        style={styles.searchBar}
        placeholder="Search"
        onChangeText={this.handleSearch}
        value={this.state.searchTerm}
        clearButtonMode="always"
        returnKeyType="search"
      />
    );
  }
}

这个例子中，handleSearch 函数会将搜索框的文本保存到组件的状态中，并打印出该文本。我们还可以设置 TextInput 的 value 属性为搜索框的当前文本，并添加 clearButtonMode 和 returnKeyType 属性，以便用户可以清除搜索框中的文本或使用 return 键来触发搜索操作。

4. 渲染搜索结果

最后，我们需要将搜索结果渲染出来。这取决于你实际要使用搜索结果的方式，这里提供一个简单的例子：

class SearchBar extends React.Component {
  state = {
    searchTerm: '',
    searchResults: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' },
    ],
  };

  handleSearch = searchTerm => {
    this.setState({ searchTerm });
    // 根据搜索词过滤数据，这里只是简单地筛选出名字中包含搜索词的结果
    const searchResults = this.state.searchResults.filter(result =>
      result.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    this.setState({ searchResults });
  };

  render() {
    return (
      <View>
        <TextInput
          style={styles.searchBar}
          placeholder="Search"
          onChangeText={this.handleSearch}
          value={this.state.searchTerm}
          clearButtonMode="always"
          returnKeyType="search"
        />
        {this.state.searchResults.map(result => (
          <Text key={result.id}>{result.name}</Text>
        ))}
      </View>
    );
  }
}

这个例子中，我们在组件的状态中添加了一个搜索结果数组，并在 handleSearch 函数中根据搜索词过滤了数据，并将结果渲染出来。

总结

通过以上步骤，你可以轻松地在 React Native 应用中添加 SearchBar。你可以根据实际需要自定义搜索栏的样式以及对搜索词进行搜索和处理。