Réagir-native IOS: Réseau d'échec de la demande de

Je teste un réagir application native (sur OS X Yosemite dans xcode simulateur de v9.2 /xcode 7.2.1). Je suis un Network request failed d'erreur avec le code ci-dessous. L'url avec le bon appid fonctionne très bien dans un navigateur et me donne les bonnes informations au format json, et la promesse /appel d'api a l'air bien.

Je ne suis pas derrière un pare-feu. J'ai essayé de dépannage de la connexion, et l'activation du Allow HTTP Services dans les paramètres de Développeur, mais je suis encore en train de l'erreur.

Aucune idée de ce qu'est le problème ici? Les erreurs réelles sont comme suit:

-- There has been a problem with your fetch operation: Network request failed
-- Api call error =  Network request failed

Voici l'api.js code:

var _ = require('lodash');
var rootUrl = 'http://api.openweathermap.org/data/2.5/weather?APPID=xxxxxxxxxxxxxxxxxxxxxx';

var kelvinToF = function(kelvin) {
  return Math.round((kelvin - 273.15) * 1.8 + 32) + ' ˚F'
};

var kelvinToC = function(kelvin) {
  return Math.round(kelvin - 273.15) + ' ˚C'
};  

module.exports = function(latitude, longitude) {
  var url = `${rootUrl}&lat=${latitude}&lon=${longitude}`;
  console.log(url);
  return fetch(url)
    .then(function(response){
      return response.json();
    })
    .then(function(json){
      return {
        city: json.name,
        temperature1: kelvinToF(json.main.temp),
        temperature2: kelvinToC(json.main.temp),
        description: _.capitalize(json.weather[0].description)
      }
    })
    .catch(function(error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
    throw error;
});
}

Voici l'index.ios.js code.

/*  --depreciated
var React = require('react-native'); 
var {
AppRegistry,
MapView,
View,
Text,
StyleSheet
} = React;
*/ 
//updated
import React from 'react';
//updated
import {
AppRegistry,
MapView,
View,
Text,
StyleSheet,
} from 'react-native';
var Api = require('./src/api');
var Weather = React.createClass({
getInitialState: function() {
return {
pin: {
latitude: 0,
longitude: 0
},
city: '',
temperature1: '',
temperature2: '',
description: ''
};
},
render: function() {
return <View style={styles.container}>
<MapView
annotations={[this.state.pin]}
onRegionChangeComplete={this.onRegionChangeComplete}
style={styles.map}>
</MapView>
<View style={styles.textWrapper}>
<Text style={styles.text}>{this.state.city}</Text>
<Text style={styles.text}>{this.state.temperature1}</Text>
<Text style={styles.text}>{this.state.temperature2}</Text>
<Text style={styles.text}>{this.state.description}</Text>
</View>
</View>
},
onRegionChangeComplete: function(region) {
this.setState({
pin: {
longitude: region.longitude,
latitude: region.latitude
}
});
Api(region.latitude, region.longitude)
.then((data) => {
console.log(region.latitude);
console.log(region.longitude);
console.log('data = ' + data);
this.setState(data);
})
.catch((error)=>{
console.log("Api call error = ", error.message);
//alert(error.message);     
});
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
backgroundColor: '#F5FCFF'
},
map: {
flex: 2,
marginTop: 30
},
textWrapper: {
flex: 1,
alignItems: 'center'
},
text: {
fontSize: 30
}
});
AppRegistry.registerComponent('weather', () => Weather);

OriginalL'auteur Agent Zebra | 2016-08-10