React-Native 학습 노트 는 ListView 를 사용 하여 네트워크 데 이 터 를 불 러 옵 니 다.
4.567917.본 고 는 fecth 를 이용 하여 네트워크 요 구 를 하 는 4.567918.
구조 기 만 들 기
//js ,js
constructor(props) {
super(props);
//listView
dataSource: new ListView.DataSource({
rowHasChanged: function (row1, row2) {
return row1 !== row2
},
sectionHeaderHasChanged:function (s1, s2) {
return s1 !== s2
},
}),
//
error: false,
errorInfo: ""
};
}
네트워크 생 성 요청
var REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
fetchData() {
// js
fetch(REQUEST_URL)
.then((response) => response.json()) .then((responseData) => { this.setState({ // dataSource: this.state.dataSource.cloneWithRows(responseData.items) }); }) .catch((error) => { this.setState({ error: true, errorInfo: error }) }) .done();
Loading View 만 들 기
// view
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading start...
</Text>
</View>
);
}
요청 이 실 패 했 을 때 보 이 는 view 를 만 듭 니 다.
// view
renderErrorView(error) {
return (
<View style={styles.container}>
<Text>
Fail: {error}
</Text>
</View>
);
}
데이터 디 스 플레이 뷰
// renderData() { return ( <ScrollView style={ { paddingTop: 22, paddingLeft: 5, paddingBottom: 5, paddingRight: 5 }}> <Text style={{fontSize: 20}}>data:</Text> <ListView dataSource={this.state.dataSource} renderRow={this.renderItemView}/> </ScrollView> ); } // itemView renderItemView(item) { return ( <View> <Text style={{fontSize: 15, color: 'blue'}}>name: {item.name} ({item.stargazers_count} stars)</Text> <Text style={{fontSize: 13, color: 'black'}}>description: {item.description}</Text> </View> ); }
마지막 으로 데이터 요청 입 니 다.
//rn ,
componentDidMount() {
//
this.fetchData();
}
// view
render() {
// view
if (!this.state.dataSource && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
// view
return this.renderErrorView(this.state.errorInfo);
}
//
return this.renderData();
}
결과 보이 기
*마지막 으로 모든 코드 를 드 립 니 다
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
ListView
} from 'react-native';
var REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
class HelloWorld extends Component {
//js ,js
constructor(props) {
super(props);
this.state = {
//listView
dataSource: new ListView.DataSource({
rowHasChanged: function (row1, row2) {
return row1 !== row2
},
sectionHeaderHasChanged:function (s1, s2) {
return s1 !== s2
},
}),
//
error: false,
errorInfo: ""
};
}
//rn ,
componentDidMount() {
//
this.fetchData();
}
// view
render() {
// view
if (!this.state.dataSource && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
// view
return this.renderErrorView(this.state.errorInfo);
}
//
return this.renderData();
}
// view
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading start...
</Text>
</View>
);
}
// view
renderErrorView(error) {
return (
<View style={styles.container}>
<Text>
Fail: {error}
</Text>
</View>
);
}
//
renderData() {
return (
<ScrollView style={
{
paddingTop: 22,
paddingLeft: 5,
paddingBottom: 5,
paddingRight: 5
}}>
<Text style={{fontSize: 20}}>data:</Text>
<ListView dataSource={this.state.dataSource}
renderRow={this.renderItemView}/>
</ScrollView>
);
}
// itemView
renderItemView(item) {
return (
<View>
<Text style={{fontSize: 15, color: 'blue'}}>name: {item.name} ({item.stargazers_count} stars)</Text>
<Text style={{fontSize: 13, color: 'black'}}>description: {item.description}</Text>
</View>
);
}
fetchData() {
// js
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
//
dataSource: this.state.dataSource.cloneWithRows(responseData.items)
});
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
// , 'HelloWorld' init
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.