신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
korkeep
ab2dcb58 1 parent 777b4939

Movie Title Pops up

Inline Side-by-side
Showing 2 changed files with 602 additions and 291 deletions
......@@ -7,9 +7,7 @@ import {
SafeAreaView,
ScrollView,
Alert,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback
TouchableOpacity
} from "react-native";
import { Icon } from "native-base";
import { AsyncStorage } from "react-native";
......@@ -42,7 +40,17 @@ export default class MovieRankingTab extends Component {
imgur6: [],
imgur7: [],
imgur8: [],
imgur9: []
imgur9: [],
overview0: [],
overview1: [],
overview2: [],
overview3: [],
overview4: [],
overview5: [],
overview6: [],
overview7: [],
overview8: [],
overview9: []
};
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
......@@ -55,193 +63,134 @@ export default class MovieRankingTab extends Component {
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
)
.then(
response => {
this.setState({
//영화 제목
name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
/*name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,*/
info: response.data.boxOfficeResult.dailyBoxOfficeList
});
.then(response => {
this.setState({
name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
info: response.data.boxOfficeResult.dailyBoxOfficeList
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl0: json.items[0].image
});
.then(response => {
this.setState({
imgurl0: response.data.results[0].poster_path,
overview0: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl1: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl1: response.data.results[0].poster_path,
overview1: response.data.results[0].overview
});
/*
name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl2: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({
imgurl2: response.data.results[0].poster_path,
overview2: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl3: json.items[0].image
});
.then(response => {
this.setState({
imgurl3: response.data.results[0].poster_path,
overview3: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl4: json.items[0].image
});
.then(response => {
this.setState({
imgurl4: response.data.results[0].poster_path,
overview4: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl5: json.items[0].image
});
.then(response => {
this.setState({
imgurl5: response.data.results[0].poster_path,
overview5: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl6: json.items[0].image
});
.then(response => {
this.setState({
imgurl6: response.data.results[0].poster_path,
overview6: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl7: json.items[0].image
});
.then(response => {
this.setState({
imgurl7: response.data.results[0].poster_path,
overview7: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl8: json.items[0].image
});
.then(response => {
this.setState({
imgurl8: response.data.results[0].poster_path,
overview8: response.data.results[0].overview
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl9: json.items[0].image
});
});*/
}
// {
// for (var i = 0; i < 10; i++) {
// console.log(
// response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
// );
// }
// }
)
.then(response => {
this.setState({
imgurl9: response.data.results[0].poster_path,
overview9: response.data.results[0].overview
});
});
})
.catch(error => {
console.log(error);
});
......@@ -258,115 +207,343 @@ export default class MovieRankingTab extends Component {
var date = year + "" + month + day;
this.getMovieList(date);
}
//눌렀을 때 동작
_onPressButton = () => {
Alert.alert("Image Pressed");
};
_onPressButton(temp) {
Alert.alert(temp);
}
render() {
return (
<SafeAreaView style={style.container}>
<ScrollView style={style.scrollView}>
<Text style={style.title}>MovieRanking</Text>
{/* ----- 1위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name0}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl0}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text style={style.name}>{this.state.name0}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 2위 ----- */}
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
style={style.button}
onPress={this._onPressButton}//누르는 동작
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl0}` }}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
<Text>{this.state.name0}</Text>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 3위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
style={style.button}
onPress={this._onPressButton}//누르는 동작
onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl1}` }}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
}}
/>
<Text>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text style={style.name}>{this.state.name2}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text>
{this.state.overview2.length < 60
? `${this.state.overview2}`
: `${this.state.overview2.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* <View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl2}` }}
/>
<Text>{this.state.name2}</Text>
{/* ----- 4위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl3}` }}
/>
<Text>{this.state.name3}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
)}
>
<Text style={style.name}>{this.state.name4}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
)}
>
<Text>
{this.state.overview4.length < 60
? `${this.state.overview4}`
: `${this.state.overview4.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl4}` }}
/>
<Text>{this.state.name4}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl5}` }}
/>
<Text>{this.state.name5}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl6}` }}
/>
<Text>{this.state.name6}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl7}` }}
/>
<Text>{this.state.name7}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl8}` }}
/>
<Text>{this.state.name8}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{ uri: `${this.state.imgurl9}` }}
/>
<Text>{this.state.name9}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...`}
</Text>
</TouchableOpacity>
</View>
</View>
</View> */}
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1
......@@ -384,20 +561,58 @@ const style = StyleSheet.create({
lowContainer: {
flex: 1,
flexDirection: "row",
// backgroundColor: "black",
// alignContent: "space-around",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
},
halfContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
poster: {
// resizeMode: "cover",
flex: 10,
width: "90%",
height: 200,
paddingHorizontal: 50
// alignItems: "stretch"
leftContainer: {
flex: 1,
// backgroundColor: "yellow",
justifyContent: "center",
alignItems: "center"
},
halfContainer: {
rightContainer: {
flex: 2
// flexDirection: "column",
// backgroundColor: "yellow"
},
rightUpContainer: {
flex: 1,
paddingTop: 15,
// backgroundColor: "blue",
justifyContent: "center",
marginLeft: 10
// alignItems: "center"
},
rightDownContainer: {
flex: 3,
// backgroundColor: "red",
// margin: "5%"
paddingTop: 20,
paddingBottom: 10
// justifyContent: "center",
alignItems: "center"
// alignItems: "center"
},
poster: {
resizeMode: "cover",
flex: 10,
width: "30%",
height: 160,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
},
name: {
fontSize: 16
},
overview: {
fontSize: 14
}
});
\ No newline at end of file
......
import React, {Component} from 'react';
import {Platform, StyleSheet, Text,
View,TouchableOpacity, AsyncStorage,
} from 'react-native';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
AsyncStorage,
ScrollView,
//불러오기 위한 것
Image,
} from 'react-native';
import { Icon } from "native-base";
import axios from "axios";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
export default class App extends Component {
export default class App extends Component {
state = {
date: "", //날짜
imgurl0: [], //이미지
name0: [], //제목
};
//날짜 정하기
componentDidMount() {
var day = new Date().getDate() - 1; // 어제 날짜
if (day == 1) {
day = 30;
} else if (day < 10) {
day = "0" + day;
}
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var date = year + "" + month + day;
this.getMovieList(date);
}
getMovieList = async date => {
axios
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
)
.then(
response => {
this.setState({
//영화 제목
name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
});
temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl0: json.items[0].image
});
});
}
)
.catch(error => {
console.log(error);
});
};
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-star' style={{ color: tintColor }} />
)
}
saveData(){
let name = "앙기모띠";
AsyncStorage.setItem('user',name);
}
displayData = async ()=>{
try{
let user = await AsyncStorage.getItem('user');
alert(user);
}
catch(error){
alert(error)
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress ={this.saveData}>
<Text>User정보 저장</Text>
</TouchableOpacity>
<TouchableOpacity onPress ={this.displayData}>
<Text>User정보 출력</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
//저장 함수
saveData() {
AsyncStorage.setItem('test', this.state.name0);
}
//출력 함수
displayData = async () => {
try {
let user = await AsyncStorage.getItem('test');
alert(user);
}
catch (error) {
alert(error)
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.top}>
<TouchableOpacity onPress={this.saveData.bind(this)}>
<Image
style={styles.poster}
source={{ uri: `${this.state.imgurl0}` }}
/>
<Text>{this.state.name0}</Text>
<Text style={styles.textStyle}>영화 정보 저장</Text>
</TouchableOpacity>
</View>
<View style={styles.bottom}>
<TouchableOpacity onPress={this.displayData}>
<Text style={styles.textStyle}>영화 정보 출력</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center"
},
top: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
},
bottom: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
fontSize: 25,
},
poster: {
flex: 5,
paddingHorizontal: 50
},
});
\ No newline at end of file
......