Подключение реагирует родной к nodejs бэкэнду

Question

Пытаюсь создать простое реагирующее нативное приложение, которое извлекает данные из моего express (nodejs приложения) и просто показывает случай. приложение прекрасно работает с API-ссылками, которые я использовал из Интернета, но по какой-то причине, когда я использую свой собственный локальный сервер (мое собственное приложение nodejs), оно ничего не показывает.

Я новичок в реакции на нативную версию, поэтому мне нужна ваша помощь.

Это код моего приложения. js (от реакции нативной):

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 / статьи :

[
    {
        "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

Я считаю, что проблема в том, что вы пытаетесь получить данные с конечной точки 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 });
  };

Answer 2

React native не работает в той же среде на локальной машине. Вы можете попробовать этот код или топор ios. Но, насколько я знаю, это не работает в той же локальной среде.

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

}