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,
  DrawerNavigationProp
>;
const HomeScreen = ({route, navigation}: HomeScreenProps) => {
  const [query, setQuery] = useState(''); // 搜索内容
  const [loading, setLoading] = useState(true); // 是否在搜索中
  const [opacity, setOpacity] = useState(0); // 清空搜索内容时清空图标的透明度

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

  return (
    
      {/*TODO*/}
      
        
          
           {
              setQuery(query);
            }}
            onSubmitEditing={() => {
              fetchData();
            }}
          />
          {/*  搜索时显示加载指示器*/}
          
        
      
    
  );
};

export default HomeScreen;

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

• autoFocus：自动选中输入内容

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

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

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