korkeep

First List printed Wants to See

...@@ -58,16 +58,17 @@ export default class MovieRankingTab extends Component { ...@@ -58,16 +58,17 @@ export default class MovieRankingTab extends Component {
58 .then( 58 .then(
59 response => { 59 response => {
60 this.setState({ 60 this.setState({
61 + //영화 제목
61 name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm, 62 name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
62 name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm, 63 name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
63 - name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm, 64 + /*name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
64 name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm, 65 name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
65 name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm, 66 name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
66 name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm, 67 name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
67 name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm, 68 name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
68 name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm, 69 name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
69 name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm, 70 name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
70 - name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm, 71 + name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,*/
71 info: response.data.boxOfficeResult.dailyBoxOfficeList 72 info: response.data.boxOfficeResult.dailyBoxOfficeList
72 }); 73 });
73 74
...@@ -96,13 +97,14 @@ export default class MovieRankingTab extends Component { ...@@ -96,13 +97,14 @@ export default class MovieRankingTab extends Component {
96 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 97 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
97 } 98 }
98 } 99 }
99 - ) 100 + )
100 .then(response => response.json()) 101 .then(response => response.json())
101 .then(json => { 102 .then(json => {
102 this.setState({ 103 this.setState({
103 imgurl1: json.items[0].image 104 imgurl1: json.items[0].image
104 }); 105 });
105 }); 106 });
107 + /*
106 name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm; 108 name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
107 fetch( 109 fetch(
108 `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 110 `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
...@@ -112,7 +114,7 @@ export default class MovieRankingTab extends Component { ...@@ -112,7 +114,7 @@ export default class MovieRankingTab extends Component {
112 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 114 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
113 } 115 }
114 } 116 }
115 - ) 117 + )
116 .then(response => response.json()) 118 .then(response => response.json())
117 .then(json => { 119 .then(json => {
118 this.setState({ 120 this.setState({
...@@ -230,7 +232,7 @@ export default class MovieRankingTab extends Component { ...@@ -230,7 +232,7 @@ export default class MovieRankingTab extends Component {
230 this.setState({ 232 this.setState({
231 imgurl9: json.items[0].image 233 imgurl9: json.items[0].image
232 }); 234 });
233 - }); 235 + });*/
234 } 236 }
235 // { 237 // {
236 // for (var i = 0; i < 10; i++) { 238 // for (var i = 0; i < 10; i++) {
...@@ -257,38 +259,45 @@ export default class MovieRankingTab extends Component { ...@@ -257,38 +259,45 @@ export default class MovieRankingTab extends Component {
257 this.getMovieList(date); 259 this.getMovieList(date);
258 } 260 }
259 261
262 + //눌렀을 때 동작
260 _onPressButton = () => { 263 _onPressButton = () => {
261 - Alert.alert("image pressed the car"); 264 + Alert.alert("Image Pressed");
262 }; 265 };
266 +
263 render() { 267 render() {
264 return ( 268 return (
265 <SafeAreaView style={style.container}> 269 <SafeAreaView style={style.container}>
266 <ScrollView style={style.scrollView}> 270 <ScrollView style={style.scrollView}>
267 <Text style={style.title}>MovieRanking</Text> 271 <Text style={style.title}>MovieRanking</Text>
272 +
268 <View style={style.lowContainer}> 273 <View style={style.lowContainer}>
269 - <TouchableOpacity onPress={this._onPressButton}> 274 + <View style={style.halfContainer}>
270 - <View> 275 + <TouchableOpacity
276 + style={style.button}
277 + onPress={this._onPressButton}//누르는 동작
278 + >
271 <Image 279 <Image
272 style={style.poster} 280 style={style.poster}
273 source={{ uri: `${this.state.imgurl0}` }} 281 source={{ uri: `${this.state.imgurl0}` }}
274 /> 282 />
275 <Text>{this.state.name0}</Text> 283 <Text>{this.state.name0}</Text>
276 - </View> 284 + </TouchableOpacity>
277 - </TouchableOpacity> 285 + </View>
278 - <TouchableOpacity 286 + <View style={style.halfContainer}>
279 - style={style.button} 287 + <TouchableOpacity
280 - onPress={this._onPressButton} 288 + style={style.button}
281 - > 289 + onPress={this._onPressButton}//누르는 동작
282 - <View> 290 + >
283 <Image 291 <Image
284 style={style.poster} 292 style={style.poster}
285 source={{ uri: `${this.state.imgurl1}` }} 293 source={{ uri: `${this.state.imgurl1}` }}
286 /> 294 />
287 <Text>{this.state.name1}</Text> 295 <Text>{this.state.name1}</Text>
288 - </View> 296 + </TouchableOpacity>
289 - </TouchableOpacity> 297 + </View>
290 </View> 298 </View>
291 - <View style={style.lowContainer}> 299 +
300 + {/* <View style={style.lowContainer}>
292 <View style={style.halfContainer}> 301 <View style={style.halfContainer}>
293 <Image 302 <Image
294 style={style.poster} 303 style={style.poster}
...@@ -351,7 +360,7 @@ export default class MovieRankingTab extends Component { ...@@ -351,7 +360,7 @@ export default class MovieRankingTab extends Component {
351 /> 360 />
352 <Text>{this.state.name9}</Text> 361 <Text>{this.state.name9}</Text>
353 </View> 362 </View>
354 - </View> 363 + </View> */}
355 </ScrollView> 364 </ScrollView>
356 </SafeAreaView> 365 </SafeAreaView>
357 ); 366 );
...@@ -391,4 +400,4 @@ const style = StyleSheet.create({ ...@@ -391,4 +400,4 @@ const style = StyleSheet.create({
391 // justifyContent: "center", 400 // justifyContent: "center",
392 alignItems: "center" 401 alignItems: "center"
393 } 402 }
394 -}); 403 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { Component } from 'react'; 1 import React, { Component } from 'react';
2 -import { View, Text, StyleSheet } from 'react-native'; 2 +import {
3 + StyleSheet,
4 + Text,
5 + View,
6 + ScrollView,
7 + TouchableOpacity,
8 + Image,
9 + Alert,
10 + AsyncStorage
11 + } from 'react-native';
3 import { Icon } from 'native-base'; 12 import { Icon } from 'native-base';
13 +import axios from "axios";
14 +const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
15 +const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
16 +const NAVER_CLIENT_SECRET = "0GRb3uya1U";
17 +import uuidv1 from "uuid/v1"; //ID 만들기위해 import
18 +
4 19
5 export default class WantToWatchTab extends Component { 20 export default class WantToWatchTab extends Component {
6 - 21 + //네비게이션 바
7 static navigationOptions = { 22 static navigationOptions = {
8 tabBarIcon: ({ tintColor }) => ( 23 tabBarIcon: ({ tintColor }) => (
9 <Icon name='ios-star' style={{ color: tintColor }} /> 24 <Icon name='ios-star' style={{ color: tintColor }} />
10 ) 25 )
11 } 26 }
27 +
28 + state = {
29 + isLoading: true,
30 + info: [],
31 + date: "",
32 + imgur1: []
33 + };
34 +
35 + getMovieList = async date => {
36 + axios
37 + .get(
38 + `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
39 + )
40 + .then(
41 + response => {
42 + this.setState({
43 + //영화 제목
44 + name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
45 + info: response.data.boxOfficeResult.dailyBoxOfficeList
46 + });
47 +
48 + name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
49 + fetch(
50 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
51 + {
52 + headers: {
53 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
54 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
55 + }
56 + }
57 + )
58 + .then(response => response.json())
59 + .then(json => {
60 + this.setState({
61 + imgurl0: json.items[0].image
62 + });
63 + });
64 + }
65 + )
66 + .catch(error => {
67 + console.log(error);
68 + });
69 + };
70 +
71 + //날짜 정하기
72 + componentDidMount() {
73 + var day = new Date().getDate() - 1; // 어제 날짜
74 + if (day == 1) {
75 + day = 30;
76 + } else if (day < 10) {
77 + day = "0" + day;
78 + }
79 + var month = new Date().getMonth() + 1; //Current Month
80 + var year = new Date().getFullYear(); //Current Year
81 + var date = year + "" + month + day;
82 + this.getMovieList(date);
83 + }
84 +
85 + //눌렀을 때 동작
86 + _onPressButton = () => {
87 + Alert.alert("Image Pressed");
88 +
89 + };
90 +
91 +
92 +
12 render() { 93 render() {
13 return ( 94 return (
14 - <View style={style.container}> 95 + <ScrollView style={style.scrollView}>
15 - <Text>WantToWatchTab</Text> 96 + <Text style={style.title}>MovieRanking</Text>
16 - </View> 97 + <View style={style.lowContainer}>
98 + <TouchableOpacity
99 + style={style.button}
100 + onPress={this._onPressButton}//누르는 동작
101 + >
102 + <Image
103 + style={style.poster}
104 + source={{ uri: `${this.state.imgurl0}` }}
105 + />
106 + <Text>{this.state.name0}</Text>
107 + </TouchableOpacity>
108 + </View>
109 + </ScrollView>
17 ); 110 );
18 } 111 }
19 } 112 }
20 113
114 +
21 const style = StyleSheet.create({ 115 const style = StyleSheet.create({
22 container: { 116 container: {
23 - flex: 1,
24 - alignItems: 'center',
25 - justifyContent: 'center',
26 - }
27 -});
...\ No newline at end of file ...\ No newline at end of file
117 + flex: 1
118 + },
119 + scrollView: {
120 + // backgroundColor: "black",
121 + // justifyContent: "center",
122 + // alignItems: "center"
123 + },
124 + title: {
125 + fontSize: 20,
126 + justifyContent: "center",
127 + alignItems: "center"
128 + },
129 + lowContainer: {
130 + flex: 1,
131 + flexDirection: "row",
132 + justifyContent: "center",
133 + alignItems: "center"
134 + },
135 + poster: {
136 + // resizeMode: "cover",
137 + flex: 10,
138 + width: "90%",
139 + height: 200,
140 + paddingHorizontal: 50
141 + // alignItems: "stretch"
142 + },
143 + });
...\ No newline at end of file ...\ No newline at end of file
......