React Native 从 Localhost 获取 API 数据 - JavaScript

在 React Native 项目中，我们经常需要从远程 API 获取数据来渲染某些组件。 对于开发人员而言，将 API 安装在本地主机上可以更快地测试和开发。

本教程将介绍如何使用 JavaScript 和 React Native 从 localhost 获取 API 数据。

为 API 创建本地主机

首先，我们需要在本地主机上创建一个 API。 我们将使用 JSON Server 将 json 数据转换为 REST API。

首先，让我们安装 JSON Server：

npm install -g json-server

现在，我们需要将数据存储在 JSON 文件中。 在此示例中，我们将在 db.json 文件中创建一个示例数据集合：

{
  "books": [
    {
      "id": 1,
      "title": "The Alchemist",
      "author": "Paulo Coelho"
    },
    {
      "id": 2,
      "title": "The Catcher in the Rye",
      "author": "J.D. Salinger"
    },
    {
      "id": 3,
      "title": "To Kill a Mockingbird",
      "author": "Harper Lee"
    }
  ]
}

现在，让我们启动服务器：

json-server --watch db.json

该命令将启动 JSON Server 并将其监听在 http://localhost:3000.

在 React Native 中获取数据

在 React Native 中获取 API 数据的方法基本上与在 Web 应用程序中相同。 首先，我们需要使用 fetch() 方法获取数据。 我们将在 componentDidMount() 生命周期方法中调用此方法，以便在加载组件时获取数据。

以下是可以将 API URL 保存在变量中并使用该变量的示例代码：

import React, { Component } from 'react';
import {
  FlatList,
  Text,
  View
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    const API_URL = 'http://localhost:3000/books';

    fetch(API_URL)
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) =>
            <Text>{item.title}, {item.author}</Text>
          }
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

在此示例代码中，我们从 http://localhost:3000/books 获取 API 数据，并在获取数据后使用 setState() 方法更新组件的状态。

FlatList 是用于在 React Native 中呈现列表的组件。 我们将将数据作为 data 属性传递，并使用 renderItem 属性定义如何呈现每个数据项。 在此示例中，我们从每个书籍数据项中提取 title 和 author 属性，并使用文本组件将它们呈现为一条条。

结论

在本教程中，我们介绍了使用 JSON Server 在本地主机上创建 API 服务器，并演示了如何在 React Native 中使用 JavaScript 从本地主机获取 API 数据。 利用此方法可以更轻松地测试和开发应用程序，同时还能在不会影响远程 API 的情况下进行本地更改。