4
반응하는 기본 앱 (xcode 시뮬레이터 v9.2/xcode 7.2.1에서 OS X Yosemite)을 테스트하고 있습니다. 아래 코드와 함께 Network request failed 오류가 발생합니다. 올바른 appid를 가진 실제 URL은 브라우저에서 정상적으로 작동하고 json 형식으로 올바른 정보를 제공하며 promise/api 호출이 정상적으로 처리됩니다.React-native IOS : 네트워크 요청이 실패했습니다.
나는 방화벽을 사용하고 있지 않습니다. 연결 문제를 해결하고 개발자 설정에서 Allow HTTP Services을 활성화했지만 오류가 계속 발생합니다.
어떤 문제가 있는지 알고 싶습니다. 다음과 같이 실제 오류는 다음과 같습니다
-- There has been a problem with your fetch operation: Network request failed
-- Api call error = Network request failed
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;
});
}
/* --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);
감사합니다. 그 모든 것들을 우적 우적 씹어 먹으려 고 힘들었지 만 이것은 정확한 답을 지적했습니다. –