Ошибка сетевого запроса на устройстве iOS || React-Native || Экспо

Что я хотел бы сделать:

Я пытаюсь отправить запрос к моему API (созданному с помощью ApiPlatform) локально в моем приложении React Native с моим устройством ios на выставке. Может кто знает как исправить? :)

Вот запрос, который я хочу сделать: "http://127.0.0.1:8000/api/пиво"

Что работает :

Мой запрос работает на моем компьютере

Мой запрос работает на моем эмуляторе Android, набрав следующее: "http://10.0.2.2:8000/api/пиво"

Что я наделал :

Для устройства ios на выставке, Я читал, что мне нужно изменить 127.0.0.1:8000 на Ipv4 моего компьютера, поэтому я побежал

ipconfig

в powershell и получите мой адрес Ipv4, введите мой запрос: "http://172.20.10.2:8000/api/пиво"

Я читал, что ios не разрешает протокол http, поэтому я добавляю в свой app.json -> infoPlist -> NSAppTransportSecurity -> true

    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }

. Как и во всех других темах, но всегда одна и та же ошибка: «Сетевой запрос не выполнен».

Я подключен к одной и той же сети как на устройстве iOS, так и на эмуляторе Android.

Например, я пробовал «https://anapioficeandfire.com/api/characters/583», и он работает на моем эмуляторе и моем устройстве iOS.

Я использую другой API, но он запускается по https. Здесь проблема, похоже, в «http».

Однако я попытался исправить это, добавив «NSAppTransportSecurity»: «true» в infoPlist в app.json, но ничего не изменилось. Как я сказал выше.

Я также пытался подключиться к Интернету в другом доме, изменить IPv4. Но все же проблема.

Я не вижу другого способа исправить это. Я, наверное, что-то упускаю.

Здесь функция, которая разрешает запрос

export function getsBeersFromRatio(){
    const url = Platform.OS === 'android'? 'http://10.0.2.2:8000/api/beers?abv%5Bgte%5D=6.2' : 'http://172.20.10.2:8000/api/beers'
    return fetch(url)
        .then((response) => response.json())
        .catch((error) => console.info(error));
}


  _searchBeersFromRatio(){
    this.setState({
      beers: [],
    },
    () => {
      this._loadBeersFromRatio()
    })
  }



  _loadBeersFromRatio(){
    console.info('====================================');
    console.info('       NEW REQUEST                   ');
    console.info('====================================');
    this.setState({ isLoading: true })
    getsBeersFromRatio().then(data => {
      console.info(data);

    })
  }


    <Button
      title = "get data from API"
      onPress = {() => this._searchBeersFromRatio()}
    />

Вот мой package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "postinstall": "node ./scripts/stfu.js"
  },
  "dependencies": {
    "country-list": "^2.1.1",
    "expo": "^33.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-chart-kit": "^2.6.1",
    "react-native-elements": "^1.1.0",
    "react-native-flags": "^1.0.0",
    "react-native-redash": "^6.3.1",
    "react-native-view-more-text": "^2.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "rn-vertical-slider": "^1.0.4",
    "victory-native": "^32.0.2"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1"
  },
  "private": true
}

Вот мой app.json

{
  "expo": {
    "name": "BierRatio",
    "slug": "BierRatio",
    "privacy": "public",
    "sdkVersion": "33.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSAppTransportSecurity" : {
          "NSAllowsArbitraryLoads" : true,
        }
      }
    }
  }
}

Ожидаемое поведение

Я ожидаю того же журнала, что и мой эмулятор Android

Фактическое поведение

Фактический вывод: «Сетевой запрос не выполнен».

Благодарить !

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
0
924
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Обходной путь:

Наконец-то я нашел обходной путь:

Когда я набрал http://"My_IPv4_address":8000/"My_Api" на своем компьютере, он сказал: "ERR_CONNECTION_REFUSED"

Поэтому я попытался запустить $php bin/консольный сервер: запустите «My_IPv4_address»: 8000

У меня появляется уведомление брандмауэра, я его принимаю. Я снова отправляю свой запрос на своем устройстве iOS, и я не знаю, почему он работает сейчас.

Так что мне нужно бежать

$php bin/консольный сервер: запустить

и в другом powershell

$php bin/консольный сервер: запустите «My_IPv4_address»: 8000

чтобы иметь доступ к моему локальному API в моем эмуляторе Android и моем устройстве iOS.

У меня была точно такая же проблема, я использую fetch() для отправки своих данных из моего собственного приложения для реагирования на мой php-сервер, я моделирую свой телефон iOS с помощью expo, но получаю ту же ошибку, что и вы, когда я настроил правильный адрес IPV4

fetch (http: // ipv4 address / ...)

а не локальный.

Также, когда я моделирую веб-представление на своем компьютере и помещаю

fetch (http: // localhost / ..)

Получаю данные все работает отлично.

Другие вопросы по теме