신승민 / 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 { ...@@ -7,9 +7,7 @@ import {
7 SafeAreaView, 7 SafeAreaView,
8 ScrollView, 8 ScrollView,
9 Alert, 9 Alert,
10 - TouchableOpacity, 10 + TouchableOpacity
11 - TouchableHighlight,
12 - TouchableWithoutFeedback
13 } from "react-native"; 11 } from "react-native";
14 import { Icon } from "native-base"; 12 import { Icon } from "native-base";
15 import { AsyncStorage } from "react-native"; 13 import { AsyncStorage } from "react-native";
...@@ -42,7 +40,17 @@ export default class MovieRankingTab extends Component { ...@@ -42,7 +40,17 @@ export default class MovieRankingTab extends Component {
42 imgur6: [], 40 imgur6: [],
43 imgur7: [], 41 imgur7: [],
44 imgur8: [], 42 imgur8: [],
45 - imgur9: [] 43 + imgur9: [],
44 + overview0: [],
45 + overview1: [],
46 + overview2: [],
47 + overview3: [],
48 + overview4: [],
49 + overview5: [],
50 + overview6: [],
51 + overview7: [],
52 + overview8: [],
53 + overview9: []
46 }; 54 };
47 static navigationOptions = { 55 static navigationOptions = {
48 tabBarIcon: ({ tintColor }) => ( 56 tabBarIcon: ({ tintColor }) => (
...@@ -55,193 +63,134 @@ export default class MovieRankingTab extends Component { ...@@ -55,193 +63,134 @@ export default class MovieRankingTab extends Component {
55 .get( 63 .get(
56 `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}` 64 `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
57 ) 65 )
58 - .then( 66 + .then(response => {
59 - response => { 67 + this.setState({
60 - this.setState({ 68 + name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
61 - //영화 제목 69 + name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
62 - name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm, 70 + name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
63 - name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm, 71 + name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
64 - /*name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm, 72 + name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
65 - name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm, 73 + name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
66 - name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm, 74 + name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
67 - name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm, 75 + name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
68 - name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm, 76 + name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
69 - name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm, 77 + name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
70 - name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm, 78 + info: response.data.boxOfficeResult.dailyBoxOfficeList
71 - name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,*/ 79 + });
72 - info: response.data.boxOfficeResult.dailyBoxOfficeList
73 - });
74 80
75 - name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm; 81 + name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
76 - fetch( 82 + axios
77 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 83 + .get(
78 - { 84 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
79 - headers: {
80 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
81 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
82 - }
83 - }
84 ) 85 )
85 - .then(response => response.json()) 86 + .then(response => {
86 - .then(json => { 87 + this.setState({
87 - this.setState({ 88 + imgurl0: response.data.results[0].poster_path,
88 - imgurl0: json.items[0].image 89 + overview0: response.data.results[0].overview
89 - });
90 }); 90 });
91 - name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm; 91 + });
92 - fetch( 92 +
93 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 93 + name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
94 - { 94 + axios
95 - headers: { 95 + .get(
96 - "X-Naver-Client-Id": NAVER_CLIENT_ID, 96 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
97 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 97 + )
98 - } 98 + .then(response => {
99 - } 99 + this.setState({
100 - ) 100 + imgurl1: response.data.results[0].poster_path,
101 - .then(response => response.json()) 101 + overview1: response.data.results[0].overview
102 - .then(json => {
103 - this.setState({
104 - imgurl1: json.items[0].image
105 - });
106 }); 102 });
107 - /* 103 + });
108 - name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm; 104 +
109 - fetch( 105 + name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
110 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 106 + axios
111 - { 107 + .get(
112 - headers: { 108 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
113 - "X-Naver-Client-Id": NAVER_CLIENT_ID, 109 + )
114 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 110 + .then(response => {
115 - } 111 + this.setState({
116 - } 112 + imgurl2: response.data.results[0].poster_path,
117 - ) 113 + overview2: response.data.results[0].overview
118 - .then(response => response.json())
119 - .then(json => {
120 - this.setState({
121 - imgurl2: json.items[0].image
122 - });
123 }); 114 });
124 - name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm; 115 + });
125 - fetch( 116 + name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
126 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 117 + axios
127 - { 118 + .get(
128 - headers: { 119 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
129 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
130 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
131 - }
132 - }
133 ) 120 )
134 - .then(response => response.json()) 121 + .then(response => {
135 - .then(json => { 122 + this.setState({
136 - this.setState({ 123 + imgurl3: response.data.results[0].poster_path,
137 - imgurl3: json.items[0].image 124 + overview3: response.data.results[0].overview
138 - });
139 }); 125 });
140 - name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm; 126 + });
141 - fetch( 127 + name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
142 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 128 + axios
143 - { 129 + .get(
144 - headers: { 130 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
145 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
146 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
147 - }
148 - }
149 ) 131 )
150 - .then(response => response.json()) 132 + .then(response => {
151 - .then(json => { 133 + this.setState({
152 - this.setState({ 134 + imgurl4: response.data.results[0].poster_path,
153 - imgurl4: json.items[0].image 135 + overview4: response.data.results[0].overview
154 - });
155 }); 136 });
156 - name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm; 137 + });
157 - fetch( 138 + name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
158 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 139 + axios
159 - { 140 + .get(
160 - headers: { 141 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
161 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
162 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
163 - }
164 - }
165 ) 142 )
166 - .then(response => response.json()) 143 + .then(response => {
167 - .then(json => { 144 + this.setState({
168 - this.setState({ 145 + imgurl5: response.data.results[0].poster_path,
169 - imgurl5: json.items[0].image 146 + overview5: response.data.results[0].overview
170 - });
171 }); 147 });
172 - name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm; 148 + });
173 - fetch( 149 + name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
174 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 150 + axios
175 - { 151 + .get(
176 - headers: { 152 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
177 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
178 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
179 - }
180 - }
181 ) 153 )
182 - .then(response => response.json()) 154 + .then(response => {
183 - .then(json => { 155 + this.setState({
184 - this.setState({ 156 + imgurl6: response.data.results[0].poster_path,
185 - imgurl6: json.items[0].image 157 + overview6: response.data.results[0].overview
186 - });
187 }); 158 });
188 - name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm; 159 + });
189 - fetch( 160 + name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
190 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 161 + axios
191 - { 162 + .get(
192 - headers: { 163 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
193 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
194 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
195 - }
196 - }
197 ) 164 )
198 - .then(response => response.json()) 165 + .then(response => {
199 - .then(json => { 166 + this.setState({
200 - this.setState({ 167 + imgurl7: response.data.results[0].poster_path,
201 - imgurl7: json.items[0].image 168 + overview7: response.data.results[0].overview
202 - });
203 }); 169 });
204 - name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm; 170 + });
205 - fetch( 171 + name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
206 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 172 + axios
207 - { 173 + .get(
208 - headers: { 174 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
209 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
210 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
211 - }
212 - }
213 ) 175 )
214 - .then(response => response.json()) 176 + .then(response => {
215 - .then(json => { 177 + this.setState({
216 - this.setState({ 178 + imgurl8: response.data.results[0].poster_path,
217 - imgurl8: json.items[0].image 179 + overview8: response.data.results[0].overview
218 - });
219 }); 180 });
220 - name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm; 181 + });
221 - fetch( 182 + name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
222 - `https://openapi.naver.com/v1/search/movie.json?query='${name}'`, 183 + axios
223 - { 184 + .get(
224 - headers: { 185 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
225 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
226 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
227 - }
228 - }
229 ) 186 )
230 - .then(response => response.json()) 187 + .then(response => {
231 - .then(json => { 188 + this.setState({
232 - this.setState({ 189 + imgurl9: response.data.results[0].poster_path,
233 - imgurl9: json.items[0].image 190 + overview9: response.data.results[0].overview
234 - }); 191 + });
235 - });*/ 192 + });
236 - } 193 + })
237 - // {
238 - // for (var i = 0; i < 10; i++) {
239 - // console.log(
240 - // response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
241 - // );
242 - // }
243 - // }
244 - )
245 .catch(error => { 194 .catch(error => {
246 console.log(error); 195 console.log(error);
247 }); 196 });
...@@ -258,115 +207,343 @@ export default class MovieRankingTab extends Component { ...@@ -258,115 +207,343 @@ export default class MovieRankingTab extends Component {
258 var date = year + "" + month + day; 207 var date = year + "" + month + day;
259 this.getMovieList(date); 208 this.getMovieList(date);
260 } 209 }
261 - 210 + _onPressButton(temp) {
262 - //눌렀을 때 동작 211 + Alert.alert(temp);
263 - _onPressButton = () => { 212 + }
264 - Alert.alert("Image Pressed");
265 - };
266 -
267 render() { 213 render() {
268 return ( 214 return (
269 <SafeAreaView style={style.container}> 215 <SafeAreaView style={style.container}>
270 <ScrollView style={style.scrollView}> 216 <ScrollView style={style.scrollView}>
271 - <Text style={style.title}>MovieRanking</Text> 217 + {/* ----- 1위 ----- */}
218 + <View style={style.lowContainer}>
219 + <View style={style.leftContainer}>
220 + <TouchableOpacity
221 + onPress={this._onPressButton.bind(this, `${this.state.name0}`)}
222 + >
223 + <Image
224 + style={style.poster}
225 + source={{
226 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl0}`
227 + }}
228 + />
229 + </TouchableOpacity>
230 + </View>
231 + <View style={style.rightContainer}>
232 + <View style={style.rightUpContainer}>
233 + <TouchableOpacity
234 + onPress={this._onPressButton.bind(
235 + this,
236 + `${this.state.name0}`
237 + )}
238 + >
239 + <Text style={style.name}>{this.state.name0}</Text>
240 + </TouchableOpacity>
241 + </View>
242 + <View style={style.rightDownContainer}>
243 + <TouchableOpacity
244 + onPress={this._onPressButton.bind(
245 + this,
246 + `${this.state.name0}`
247 + )}
248 + >
249 + <Text>
250 + {this.state.overview1.length < 60
251 + ? `${this.state.overview1}`
252 + : `${this.state.overview1.substring(0, 57)}...`}
253 + </Text>
254 + </TouchableOpacity>
255 + </View>
256 + </View>
257 + </View>
272 258
259 + {/* ----- 2위 ----- */}
273 <View style={style.lowContainer}> 260 <View style={style.lowContainer}>
274 - <View style={style.halfContainer}> 261 + <View style={style.leftContainer}>
275 <TouchableOpacity 262 <TouchableOpacity
276 - style={style.button} 263 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
277 - onPress={this._onPressButton}//누르는 동작
278 > 264 >
279 <Image 265 <Image
280 style={style.poster} 266 style={style.poster}
281 - source={{ uri: `${this.state.imgurl0}` }} 267 + source={{
268 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
269 + }}
282 /> 270 />
283 - <Text>{this.state.name0}</Text>
284 </TouchableOpacity> 271 </TouchableOpacity>
285 </View> 272 </View>
286 - <View style={style.halfContainer}> 273 + <View style={style.rightContainer}>
274 + <View style={style.rightUpContainer}>
275 + <TouchableOpacity
276 + onPress={this._onPressButton.bind(
277 + this,
278 + `${this.state.name1}`
279 + )}
280 + >
281 + <Text style={style.name}>{this.state.name1}</Text>
282 + </TouchableOpacity>
283 + </View>
284 + <View style={style.rightDownContainer}>
285 + <TouchableOpacity
286 + onPress={this._onPressButton.bind(
287 + this,
288 + `${this.state.name1}`
289 + )}
290 + >
291 + <Text>
292 + {this.state.overview1.length < 60
293 + ? `${this.state.overview1}`
294 + : `${this.state.overview1.substring(0, 57)}...`}
295 + </Text>
296 + </TouchableOpacity>
297 + </View>
298 + </View>
299 + </View>
300 + {/* ----- 3위 ----- */}
301 + <View style={style.lowContainer}>
302 + <View style={style.leftContainer}>
287 <TouchableOpacity 303 <TouchableOpacity
288 - style={style.button} 304 + onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
289 - onPress={this._onPressButton}//누르는 동작
290 > 305 >
291 <Image 306 <Image
292 style={style.poster} 307 style={style.poster}
293 - source={{ uri: `${this.state.imgurl1}` }} 308 + source={{
309 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
310 + }}
294 /> 311 />
295 - <Text>{this.state.name1}</Text>
296 </TouchableOpacity> 312 </TouchableOpacity>
297 </View> 313 </View>
314 + <View style={style.rightContainer}>
315 + <View style={style.rightUpContainer}>
316 + <TouchableOpacity
317 + onPress={this._onPressButton.bind(
318 + this,
319 + `${this.state.name2}`
320 + )}
321 + >
322 + <Text style={style.name}>{this.state.name2}</Text>
323 + </TouchableOpacity>
324 + </View>
325 + <View style={style.rightDownContainer}>
326 + <TouchableOpacity
327 + onPress={this._onPressButton.bind(
328 + this,
329 + `${this.state.name2}`
330 + )}
331 + >
332 + <Text>
333 + {this.state.overview2.length < 60
334 + ? `${this.state.overview2}`
335 + : `${this.state.overview2.substring(0, 57)}...`}
336 + </Text>
337 + </TouchableOpacity>
338 + </View>
339 + </View>
298 </View> 340 </View>
299 - 341 + {/* ----- 4위 ----- */}
300 - {/* <View style={style.lowContainer}> 342 + <View style={style.lowContainer}>
301 - <View style={style.halfContainer}> 343 + <View style={style.leftContainer}>
302 - <Image 344 + <TouchableOpacity
303 - style={style.poster} 345 + onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
304 - source={{ uri: `${this.state.imgurl2}` }} 346 + >
305 - /> 347 + <Image
306 - <Text>{this.state.name2}</Text> 348 + style={style.poster}
349 + source={{
350 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
351 + }}
352 + />
353 + </TouchableOpacity>
307 </View> 354 </View>
308 - <View style={style.halfContainer}> 355 + <View style={style.rightContainer}>
309 - <Image 356 + <View style={style.rightUpContainer}>
310 - style={style.poster} 357 + <TouchableOpacity
311 - source={{ uri: `${this.state.imgurl3}` }} 358 + onPress={this._onPressButton.bind(
312 - /> 359 + this,
313 - <Text>{this.state.name3}</Text> 360 + `${this.state.name4}`
361 + )}
362 + >
363 + <Text style={style.name}>{this.state.name4}</Text>
364 + </TouchableOpacity>
365 + </View>
366 + <View style={style.rightDownContainer}>
367 + <TouchableOpacity
368 + onPress={this._onPressButton.bind(
369 + this,
370 + `${this.state.name4}`
371 + )}
372 + >
373 + <Text>
374 + {this.state.overview4.length < 60
375 + ? `${this.state.overview4}`
376 + : `${this.state.overview4.substring(0, 57)}...`}
377 + </Text>
378 + </TouchableOpacity>
379 + </View>
314 </View> 380 </View>
315 </View> 381 </View>
316 <View style={style.lowContainer}> 382 <View style={style.lowContainer}>
317 - <View style={style.halfContainer}> 383 + <View style={style.leftContainer}>
318 - <Image 384 + <TouchableOpacity
319 - style={style.poster} 385 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
320 - source={{ uri: `${this.state.imgurl4}` }} 386 + >
321 - /> 387 + <Image
322 - <Text>{this.state.name4}</Text> 388 + style={style.poster}
389 + source={{
390 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
391 + }}
392 + />
393 + </TouchableOpacity>
394 + </View>
395 + <View style={style.rightContainer}>
396 + <View style={style.rightUpContainer}>
397 + <TouchableOpacity
398 + onPress={this._onPressButton.bind(
399 + this,
400 + `${this.state.name1}`
401 + )}
402 + >
403 + <Text style={style.name}>{this.state.name1}</Text>
404 + </TouchableOpacity>
405 + </View>
406 + <View style={style.rightDownContainer}>
407 + <TouchableOpacity
408 + onPress={this._onPressButton.bind(
409 + this,
410 + `${this.state.name1}`
411 + )}
412 + >
413 + <Text>
414 + {this.state.overview1.length < 60
415 + ? `${this.state.overview1}`
416 + : `${this.state.overview1.substring(0, 57)}...`}
417 + </Text>
418 + </TouchableOpacity>
419 + </View>
420 + </View>
421 + </View>
422 + <View style={style.lowContainer}>
423 + <View style={style.leftContainer}>
424 + <TouchableOpacity
425 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
426 + >
427 + <Image
428 + style={style.poster}
429 + source={{
430 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
431 + }}
432 + />
433 + </TouchableOpacity>
323 </View> 434 </View>
324 - <View style={style.halfContainer}> 435 + <View style={style.rightContainer}>
325 - <Image 436 + <View style={style.rightUpContainer}>
326 - style={style.poster} 437 + <TouchableOpacity
327 - source={{ uri: `${this.state.imgurl5}` }} 438 + onPress={this._onPressButton.bind(
328 - /> 439 + this,
329 - <Text>{this.state.name5}</Text> 440 + `${this.state.name1}`
441 + )}
442 + >
443 + <Text style={style.name}>{this.state.name1}</Text>
444 + </TouchableOpacity>
445 + </View>
446 + <View style={style.rightDownContainer}>
447 + <TouchableOpacity
448 + onPress={this._onPressButton.bind(
449 + this,
450 + `${this.state.name1}`
451 + )}
452 + >
453 + <Text>
454 + {this.state.overview1.length < 60
455 + ? `${this.state.overview1}`
456 + : `${this.state.overview1.substring(0, 57)}...`}
457 + </Text>
458 + </TouchableOpacity>
459 + </View>
330 </View> 460 </View>
331 </View> 461 </View>
332 <View style={style.lowContainer}> 462 <View style={style.lowContainer}>
333 - <View style={style.halfContainer}> 463 + <View style={style.leftContainer}>
334 - <Image 464 + <TouchableOpacity
335 - style={style.poster} 465 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
336 - source={{ uri: `${this.state.imgurl6}` }} 466 + >
337 - /> 467 + <Image
338 - <Text>{this.state.name6}</Text> 468 + style={style.poster}
469 + source={{
470 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
471 + }}
472 + />
473 + </TouchableOpacity>
339 </View> 474 </View>
340 - <View style={style.halfContainer}> 475 + <View style={style.rightContainer}>
341 - <Image 476 + <View style={style.rightUpContainer}>
342 - style={style.poster} 477 + <TouchableOpacity
343 - source={{ uri: `${this.state.imgurl7}` }} 478 + onPress={this._onPressButton.bind(
344 - /> 479 + this,
345 - <Text>{this.state.name7}</Text> 480 + `${this.state.name1}`
481 + )}
482 + >
483 + <Text style={style.name}>{this.state.name1}</Text>
484 + </TouchableOpacity>
485 + </View>
486 + <View style={style.rightDownContainer}>
487 + <TouchableOpacity
488 + onPress={this._onPressButton.bind(
489 + this,
490 + `${this.state.name1}`
491 + )}
492 + >
493 + <Text>
494 + {this.state.overview1.length < 60
495 + ? `${this.state.overview1}`
496 + : `${this.state.overview1.substring(0, 57)}...`}
497 + </Text>
498 + </TouchableOpacity>
499 + </View>
346 </View> 500 </View>
347 </View> 501 </View>
348 <View style={style.lowContainer}> 502 <View style={style.lowContainer}>
349 - <View style={style.halfContainer}> 503 + <View style={style.leftContainer}>
350 - <Image 504 + <TouchableOpacity
351 - style={style.poster} 505 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
352 - source={{ uri: `${this.state.imgurl8}` }} 506 + >
353 - /> 507 + <Image
354 - <Text>{this.state.name8}</Text> 508 + style={style.poster}
509 + source={{
510 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
511 + }}
512 + />
513 + </TouchableOpacity>
355 </View> 514 </View>
356 - <View style={style.halfContainer}> 515 + <View style={style.rightContainer}>
357 - <Image 516 + <View style={style.rightUpContainer}>
358 - style={style.poster} 517 + <TouchableOpacity
359 - source={{ uri: `${this.state.imgurl9}` }} 518 + onPress={this._onPressButton.bind(
360 - /> 519 + this,
361 - <Text>{this.state.name9}</Text> 520 + `${this.state.name1}`
521 + )}
522 + >
523 + <Text style={style.name}>{this.state.name1}</Text>
524 + </TouchableOpacity>
525 + </View>
526 + <View style={style.rightDownContainer}>
527 + <TouchableOpacity
528 + onPress={this._onPressButton.bind(
529 + this,
530 + `${this.state.name1}`
531 + )}
532 + >
533 + <Text>
534 + {this.state.overview1.length < 60
535 + ? `${this.state.overview1}`
536 + : `${this.state.overview1.substring(0, 57)}...`}
537 + </Text>
538 + </TouchableOpacity>
539 + </View>
362 </View> 540 </View>
363 - </View> */} 541 + </View>
364 </ScrollView> 542 </ScrollView>
365 </SafeAreaView> 543 </SafeAreaView>
366 ); 544 );
367 } 545 }
368 } 546 }
369 -
370 const style = StyleSheet.create({ 547 const style = StyleSheet.create({
371 container: { 548 container: {
372 flex: 1 549 flex: 1
...@@ -384,20 +561,58 @@ const style = StyleSheet.create({ ...@@ -384,20 +561,58 @@ const style = StyleSheet.create({
384 lowContainer: { 561 lowContainer: {
385 flex: 1, 562 flex: 1,
386 flexDirection: "row", 563 flexDirection: "row",
564 + // backgroundColor: "black",
565 + // alignContent: "space-around",
566 + justifyContent: "center",
567 + alignItems: "center",
568 + marginBottom: 10
569 + },
570 + halfContainer: {
571 + flex: 1,
387 justifyContent: "center", 572 justifyContent: "center",
388 alignItems: "center" 573 alignItems: "center"
389 }, 574 },
390 - poster: { 575 + leftContainer: {
391 - // resizeMode: "cover", 576 + flex: 1,
392 - flex: 10, 577 + // backgroundColor: "yellow",
393 - width: "90%", 578 + justifyContent: "center",
394 - height: 200, 579 + alignItems: "center"
395 - paddingHorizontal: 50
396 - // alignItems: "stretch"
397 }, 580 },
398 - halfContainer: { 581 + rightContainer: {
582 + flex: 2
583 + // flexDirection: "column",
584 + // backgroundColor: "yellow"
585 + },
586 + rightUpContainer: {
399 flex: 1, 587 flex: 1,
588 + paddingTop: 15,
589 + // backgroundColor: "blue",
590 + justifyContent: "center",
591 + marginLeft: 10
592 + // alignItems: "center"
593 + },
594 + rightDownContainer: {
595 + flex: 3,
596 + // backgroundColor: "red",
597 + // margin: "5%"
598 + paddingTop: 20,
599 + paddingBottom: 10
400 // justifyContent: "center", 600 // justifyContent: "center",
401 - alignItems: "center" 601 + // alignItems: "center"
602 + },
603 + poster: {
604 + resizeMode: "cover",
605 + flex: 10,
606 + width: "30%",
607 + height: 160,
608 + paddingHorizontal: 50,
609 + alignItems: "stretch",
610 + borderRadius: 7
611 + },
612 + name: {
613 + fontSize: 16
614 + },
615 + overview: {
616 + fontSize: 14
402 } 617 }
403 }); 618 });
...\ 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 {Platform, StyleSheet, Text, 2 +import {
3 - View,TouchableOpacity, AsyncStorage, 3 + StyleSheet,
4 -} from 'react-native'; 4 + Text,
5 + View,
6 + TouchableOpacity,
7 + AsyncStorage,
8 + ScrollView,
9 + //불러오기 위한 것
10 + Image,
11 +} from 'react-native';
5 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";
6 17
7 - 18 +
8 -export default class App extends Component { 19 +export default class App extends Component {
20 + state = {
21 + date: "", //날짜
22 + imgurl0: [], //이미지
23 + name0: [], //제목
24 + };
25 +
26 + //날짜 정하기
27 + componentDidMount() {
28 + var day = new Date().getDate() - 1; // 어제 날짜
29 + if (day == 1) {
30 + day = 30;
31 + } else if (day < 10) {
32 + day = "0" + day;
33 + }
34 + var month = new Date().getMonth() + 1; //Current Month
35 + var year = new Date().getFullYear(); //Current Year
36 + var date = year + "" + month + day;
37 + this.getMovieList(date);
38 + }
39 +
40 + getMovieList = async date => {
41 + axios
42 + .get(
43 + `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
44 + )
45 + .then(
46 + response => {
47 + this.setState({
48 + //영화 제목
49 + name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
50 + });
51 +
52 + temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
53 + fetch(
54 + `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
55 + {
56 + headers: {
57 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
58 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
59 + }
60 + }
61 + )
62 + .then(response => response.json())
63 + .then(json => {
64 + this.setState({
65 + imgurl0: json.items[0].image
66 + });
67 + });
68 + }
69 + )
70 + .catch(error => {
71 + console.log(error);
72 + });
73 + };
74 +
9 //네비게이션 바 75 //네비게이션 바
10 static navigationOptions = { 76 static navigationOptions = {
11 tabBarIcon: ({ tintColor }) => ( 77 tabBarIcon: ({ tintColor }) => (
12 <Icon name='ios-star' style={{ color: tintColor }} /> 78 <Icon name='ios-star' style={{ color: tintColor }} />
13 ) 79 )
14 } 80 }
15 - saveData(){ 81 +
16 - let name = "앙기모띠"; 82 + //저장 함수
17 - AsyncStorage.setItem('user',name); 83 + saveData() {
18 - } 84 + AsyncStorage.setItem('test', this.state.name0);
19 - displayData = async ()=>{ 85 + }
20 - try{ 86 +
21 - let user = await AsyncStorage.getItem('user'); 87 + //출력 함수
22 - alert(user); 88 + displayData = async () => {
23 - } 89 + try {
24 - catch(error){ 90 + let user = await AsyncStorage.getItem('test');
25 - alert(error) 91 + alert(user);
26 - } 92 + }
27 - } 93 + catch (error) {
28 - render() { 94 + alert(error)
29 - return ( 95 + }
30 - <View style={styles.container}> 96 + }
31 - <TouchableOpacity onPress ={this.saveData}> 97 +
32 - <Text>User정보 저장</Text> 98 +
33 - </TouchableOpacity> 99 + render() {
34 - <TouchableOpacity onPress ={this.displayData}> 100 + return (
35 - <Text>User정보 출력</Text> 101 + <View style={styles.container}>
36 - </TouchableOpacity> 102 + <View style={styles.top}>
37 - </View> 103 + <TouchableOpacity onPress={this.saveData.bind(this)}>
38 - ); 104 + <Image
39 - } 105 + style={styles.poster}
40 -} 106 + source={{ uri: `${this.state.imgurl0}` }}
41 - 107 + />
42 -const styles = StyleSheet.create({ 108 + <Text>{this.state.name0}</Text>
43 - container: { 109 + <Text style={styles.textStyle}>영화 정보 저장</Text>
44 - flex: 1, 110 + </TouchableOpacity>
45 - justifyContent: 'center', 111 + </View>
46 - alignItems: 'center', 112 +
47 - backgroundColor: '#F5FCFF', 113 + <View style={styles.bottom}>
48 - }, 114 + <TouchableOpacity onPress={this.displayData}>
115 + <Text style={styles.textStyle}>영화 정보 출력</Text>
116 + </TouchableOpacity>
117 + </View>
118 + </View>
119 + );
120 + }
121 +}
122 +
123 +const styles = StyleSheet.create({
124 + container: {
125 + flex: 1,
126 + alignItems: "center"
127 + },
128 + top: {
129 + flex: 2,
130 + justifyContent: 'center',
131 + alignItems: 'center',
132 + },
133 + bottom: {
134 + flex: 1,
135 + justifyContent: 'center',
136 + alignItems: 'center',
137 + },
138 + textStyle: {
139 + fontSize: 25,
140 + },
141 + poster: {
142 + flex: 5,
143 + paddingHorizontal: 50
144 + },
49 }); 145 });
...\ No newline at end of file ...\ No newline at end of file
......