RN 네트워크 요청(get, post)
2412 단어 RN
import React, { Component } from "react";
import { StyleSheet, Text, ScrollView } from "react-native";
export default class FetchGetBasic extends Component {
constructor(props) {
super(props);
this.state = {
data: [] //
};
}
async componentDidMount() {
let url = "https://cnodejs.org/api/v1/topics?page=1&tab=job&limit=10";
let data = await fetch(url); //
data = await data.json(); //
this.setState({
//
data: data.data
});
}
render() {
return (
{this.state.data.map((item, index) => {
return (
{item.title}
);
})}
);
}
}
const styles = StyleSheet.create({
list: {
padding: 20,
borderBottomWidth: 1,
borderColor: "#ddd"
}
});
다음은 post 요청입니다.
import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
export default class FetchPostBasic extends Component {
constructor(props) {
super(props);
this.state = {
data: {} //
};
}
async componentDidMount() {
let url = "https://cnodejs.org/api/v1/accesstoken"; //
let obj = { accesstoken: "f46b1568-a0c1-4b11-8904-d6c3d07ac026" };
obj = JSON.stringify(obj); // JSON
let options = {
//
method: "POST",
headers: {
accept: "application/json",
"Content-Type": "application/json"
},
body: obj
};
let data = await fetch(url, options); //
data = await data.json(); //
// alert(JSON.stringify(data));
this.setState({
//
data: data
});
}
render() {
return (
{this.state.data.loginname}
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: "center",
borderBottomWidth: 1,
borderColor: "#ddd",
padding: 10
},
avatar: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 20
}
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
리액트 네이티브 설치react-native로 앱을 개발할 때 자주 사용되는 네이티브 기능(위치 정보, 카메라 등)을 패키지로 묶어서 제공, 처음 시작은 편할 수 있지만, 사용하지 않은 네이티브 모듈로 인해, 앱 파일 사이즈가 커지는 문...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.