在平面列表中实现搜索栏以搜索api数据react native

npm install axios --save
npm install react-native-elements --save

import React, { useState } from 'react';
import { View, FlatList, TextInput } from 'react-native';
import { SearchBar } from 'react-native-elements';
import axios from 'axios';

const MyComponent = () => {
  const [searchText, setSearchText] = useState('');
  const [data, setData] = useState([]);

  // 在这里编写发送网络请求的逻辑
  // ...
}

const searchAPI = async (text) => {
  try {
    const response = await axios.get(`https://api.example.com/search?q=${text}`);
    setData(response.data);
  } catch (error) {
    console.error(error);
  }
};

return (
  <View>
    <SearchBar
      placeholder="输入关键字搜索"
      onChangeText={(text) => setSearchText(text)}
      onSubmitEditing={() => searchAPI(searchText)}
      value={searchText}
    />
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={(item) => item.id.toString()}
    />
  </View>
);