Showing
2 changed files
with
155 additions
and
30 deletions
... | @@ -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 | ... | ... |
-
Please register or login to post a comment