react-native+typescript+axios实现查询功能

在 React Native 中使用 TypeScript 和 Axios 实现查询功能的步如下：

1. 安装所需的依赖：

npm install axios

2. 创建一个查询组件(SearchComponent.tsx)。

import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';
import axios from 'axios';

interface SearchComponentProps {
  onSearch: (searchTerm: string) => void;
}

const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = async () => {
    try {
      const response = await axios.get(`https://api.example.com/search?term=${searchTerm}`);
      // 在这里处理查询结果
      console.log(response.data);
      onSearch(searchTerm);
    } catch (error) {
      // 处理错误情况
      console.error(error);
    }
  };

  return (
    <View>
      <TextInput
        value={searchTerm}
        onChangeText={(text) => setSearchTerm(text)}
      />
      <Button title="Search" onPress={handleSearch} />
    </View>
  );
};

export default SearchComponent;

3. 在父组件中使用查询组件并处理查询逻辑。

import React from 'react';
import { View, Text } from 'react-native';
import SearchComponent from './SearchComponent';

const ParentComponent: React.FC = () => {
  const handleSearch = (searchTerm: string) => {
    // 在这里处理查询逻辑，可以更新状态或进行其他操作
    console.log('查询关键词:', searchTerm);
  };

  return (
    <View>
      <Text>查询功能示例</Text>
      <SearchComponent onSearch={handleSearch} />
    </View>
  );
};

export default ParentComponent;

4. 在应用的入口文件中渲染父组件。

import React from 'react';
import { AppRegistry } from 'react-native';
import ParentComponent from './ParentComponent';

const App: React.FC = () => {
  return <ParentComponent />;
};

AppRegistry.registerComponent('MyApp', () => App);

以上是一个简单的查询功能的实现示例，你可以根据实际需求进行相应的修改和扩展。记得根据你的项目需要进行网络请求的配置，例如设置请求头、身份验证等。