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
Vous devez vous connecter pour publier un commentaire.
Vous aurez besoin de changer votre NSAppTransportSecurity politique en info.plist. Par défaut dans ios 8 et plus clair à la demande sont bloqués. Voir De la sécurité des transports a bloqué un texte clair HTTP
OriginalL'auteur while1
Ok merci à @while1 la réponse ci-dessus, j'ai trouvé la réponse qui a fonctionné pour moi. Le code à ma question ci-dessus est très bien. J'ai dû changer l'info.fichier plist. Wow ce une douleur dans le cul d'apple, pourquoi compliquer les choses de manière aussi extrême?
En gros, j'ai ajouté ce qui suit à l'info.fichier plist.
Comme ceci:
Voir plus d'informations sur ce sujet dans le lien de @while1 la réponse ci-dessus.
OriginalL'auteur Agent Zebra
votre code semble familière me semble que vous êtes en train d'apprendre à Construire des applications avec réagissent natif des cours de formation offerts par Stephen Grider.
Même j'ai eu ce problème.
inclure
delete GLOBAL.XMLHttpRequest;
au début de api.js fichier.Comme ceci:
There has been a problem with your fetch operation: XMLHttpRequest is not defined
etApi call error = XMLHttpRequest is not defined
Merci Ashok.OriginalL'auteur Ashok R