React Native实现搜索框功能

手把手教你如何在React Native中实现搜索功能，搜索图标使用的是react-native-vector-icons中的MaterialIcons，前提是已经安装了react-native-vector-icons，安装react-native-vector-icons参见：在React Native项目中使用react-native-vector-icons图标

代码：

import React, {useState} from 'react';
import {
  View,
  Text,
  ScrollView,
  TextInput,
  ActivityIndicator,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {DrawerParamList, TabParamList} from '../../../types/types';
import {CompositeNavigationProp} from '@react-navigation/native';
import {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';
import {DrawerNavigationProp} from '@react-navigation/drawer';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

// export type HomeScreenProps = RouterStackScreenProps<'HomeScreen'>;
export type HomeScreenProps = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'HomeScreen'>,
  DrawerNavigationProp<DrawerParamList>
>;
const HomeScreen = ({route, navigation}: HomeScreenProps) => {
  const [query, setQuery] = useState<string>(''); // 搜索内容
  const [loading, setLoading] = useState<boolean>(true); // 是否在搜索中
  const [opacity, setOpacity] = useState<number>(0); // 清空搜索内容时清空图标的透明度

  const fetchData = () => {
    setLoading(false);
    setOpacity(1);
    // TODO
    //  调用后端搜索接口，
    //  搜索结束要将state恢复初始状态
    // setLoading(true);
    // setOpacity(0);
  };

  return (
    <View style={{flex: 1}}>
      {/*TODO*/}
      <ScrollView>
        <View
          style={{
            flexDirection: 'row',
            borderColor: '#c6c6c6',
            borderRadius: 8,
            borderWidth: 1,
            paddingVertical: 10,
            paddingHorizontal: 8,
          }}>
          <MaterialIcons
            name="search"
            size={20}
            color="#c6c6c6"
            style={{marginRight: 5}}
          />
          <TextInput
            placeholder="搜索"
            autoFocus={true}
            clearButtonMode="while-editing"
            returnKeyType="search"
            onChangeText={query => {
              setQuery(query);
            }}
            onSubmitEditing={() => {
              fetchData();
            }}
          />
          {/*  搜索时显示加载指示器*/}
          <ActivityIndicator
            size="small"
            color="#6435c9"
            animating={!loading}
            style={{position: 'absolute', right: 10, top: 20, opacity: opacity}}
          />
        </View>
      </ScrollView>
    </View>
  );
};

export default HomeScreen;

使用React Native提供的TextInput组件来实现搜索输入框功能，该组件的属性说明：

• autoFocus：自动选中输入内容

• clearButtonMode：显示清除输入内容图标，只有在iOS显示这个属性

• returnKeyType：回车键输入时键盘最后一个键显示的文本内容，这里设置文本为”search“，只有在iOS显示这个属性

• onSubmitEditing：搜索触发的回调函数，这里绑定fetchData方法，需要在这里个方法调用后端搜索接口获取搜索结果