Question

我正在尝试制作一个简单的本机应用程序，该应用程序从我的express（nodejs应用程序）中获取数据，并只是简单地演示一下。该应用程序可以与我从网络上使用的api链接一起正常工作，但是由于某些原因，当我使用自己的本地服务器（我自己的nodejs应用程序）时，它什么也没有显示。

是新来的本地人，所以我需要您的帮助。

这是我App.js的代码（来自react native）：

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, FlatList } from "react-native";
export default class App extends Component<Props> {
  state = {
    data: [],
  };

  fetchData = async () => {
    const response = await fetch("http://myipadress:5001/articles");
    const articles = await response.json();
    this.setState({ data: articles });
  };
  componentDidMount() {
    this.fetchData();
  }
  render() {
    return (
      <View>
        <Text>data</Text>

        <FlatList
          data={this.state.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <View
              style={{ backgroundColor: "#abc123", padding: 10, margin: 10 }}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                {item.title}
              </Text>

              <Text>{item.genre}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
});

这是我的api：我可以通过链接http://myipadress:5001/articles访问：

[
    {
        "featured_media": {
            "source_url": "String",
            "caption": "String",
            "media_type": "String"
        },
        "categories": [
            "String"
        ],
        "tags": [
            "String"
        ],
        "_id": "5ea02d3d12d8153e34f779ca",
        "date": "2020-04-22T11:40:45.000Z",
        "title": "String",
        "excerpt": "String",
        "author": "String",
        "link": "String",
        "published_at": "2020-04-22T11:40:45.000Z",
        "content": "String",
        "__v": 0
    }
]

Answer 1

React native无法在本地计算机上的相同环境下工作。您可以尝试使用此代码或axios。但据我所知，它不能在相同的本地环境中工作。

async () => {
    await fetch('http://myipadress:5001/articles')
    .then((response) => response.json())
    .then((responseJson) => console.log(responseJson))
    .catch(err => console.log(err);

}

Answer 2

我相信这里的问题是您正试图从HTTP端点（这里是本地服务器）获取数据。在使用Expo SDK开发应用程序时，我曾经遇到过此问题。您可以通过安装ngrok来解决此问题，该方法将公开本地服务器的HTTPS终结点。

下载ngrok并在终端上运行ngrok http 5001或您的端口号。 ngrok将公开一个HTTPS终结点，可用于获取数据。

fetchData = async () => {
    const response = await fetch("replace-with-new-ng-rk-url/articles");
    const articles = await response.json();
    this.setState({ data: articles });
  };

将React Native连接到Node.js后端

2 个答案: