신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
ca4aaf43 1 parent 89606a8e

add detail

Inline Side-by-side
Showing 4 changed files with 485 additions and 122 deletions
1 +import React, { Component } from "react";
2 +import { View, Text, StyleSheet, Button, Image } from "react-native";
3 +import { Icon } from "native-base";
4 +import {
5 + NavigationActions,
6 + createStackNavigator,
7 + withNavigation
8 +} from "react-navigation";
9 +import axios from "axios";
10 +import { AsyncStorage } from "react-native";
11 +
12 +export default class Detail extends Component {
13 + static navigationOptions = {
14 + tabBarIcon: ({ tintColor }) => (
15 + <Icon name="ios-albums" style={{ color: tintColor }} />
16 + )
17 + };
18 +
19 + state = {
20 + title: "1",
21 + overview: "",
22 + release_date: "",
23 + url: ""
24 + };
25 +
26 + getDB = async search => {
27 + axios
28 + .get(
29 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
30 + )
31 + .then(response => {
32 + this.setState({
33 + title: response.data.results[0].title,
34 + overview: response.data.results[0].overview,
35 + release_date: response.data.results[0].release_date,
36 + url: response.data.results[0].poster_path
37 + });
38 + });
39 + };
40 + getNaverApi = async search => {
41 + fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
42 + headers: {
43 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
44 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
45 + }
46 + })
47 + .then(response => response.json())
48 + .then(json => this.setState({ items: json.items }));
49 + };
50 +
51 + _retrieveData = async item => {
52 + try {
53 + const value = await AsyncStorage.getItem(item);
54 + if (value !== null) {
55 + // We have data!!
56 + console.log(value);
57 + }
58 + } catch (error) {
59 + // Error retrieving data
60 + }
61 + };
62 +
63 + _AllKeys = async () => {
64 + const key = await AsyncStorage.getAllKeys();
65 + console.log(key);
66 + };
67 +
68 + componentDidMount() {
69 + // this._retrieveData("겨울왕국 2");
70 + // this._AllKeys();
71 + // AsyncStorage.removeItem("1");
72 + }
73 +
74 + render() {
75 + const { navigation } = this.props;
76 + var temp = navigation.getParam("title", "");
77 + this.getDB(temp);
78 + return (
79 + <View style={style.container}>
80 + <Text>{this.state.title}</Text>
81 + <Text>{this.state.release_date}</Text>
82 + <Text>{this.state.overview}</Text>
83 + <Text>{this.state.url}</Text>
84 + <Image
85 + source={{
86 + uri: `https://image.tmdb.org/t/p/original${this.state.url}`
87 + }}
88 + style={styles.poster}
89 + />
90 + <Button
91 + title="추가 "
92 + onPress={() =>
93 + AsyncStorage.setItem(this.state.title, this.state.title)
94 + }
95 + />
96 + </View>
97 + );
98 + }
99 +}
100 +const style = StyleSheet.create({
101 + container: {
102 + flex: 1,
103 + alignItems: "center",
104 + justifyContent: "center"
105 + }
106 +});
107 +
108 +//export default withNavigation(Detail);
109 +
110 +const styles = StyleSheet.create({
111 + container: {
112 + flex: 1,
113 + backgroundColor: "black"
114 + },
115 + searchContainer: {
116 + backgroundColor: "black",
117 + marginLeft: 40,
118 + marginRight: 40
119 + },
120 + input: {
121 + borderRadius: 10,
122 + backgroundColor: "#FFF",
123 + paddingLeft: 10,
124 + paddingRight: 10,
125 + height: 50,
126 + alignItems: "center",
127 + flexDirection: "row",
128 + justifyContent: "space-between",
129 + borderBottomColor: "#bbb",
130 + borderBottomWidth: StyleSheet.hairlineWidth
131 + },
132 + inputText: {
133 + flex: 1
134 + },
135 + addBtn: {
136 + color: "#4169E1"
137 + },
138 + imagecontainer: {
139 + flex: 1
140 + },
141 + lowContainer: {
142 + backgroundColor: "black",
143 + flex: 1,
144 + flexDirection: "row",
145 + justifyContent: "center",
146 + alignItems: "center"
147 + },
148 + leftContainer: {
149 + flex: 1,
150 + backgroundColor: "black",
151 + justifyContent: "center",
152 + alignItems: "center"
153 + },
154 + rightContainer: {
155 + flex: 2,
156 + backgroundColor: "black"
157 + },
158 + rightUpContainer: {
159 + flex: 1,
160 + backgroundColor: "black",
161 + paddingTop: 35,
162 + justifyContent: "center",
163 + marginLeft: 20
164 + },
165 + rightDownContainer: {
166 + flex: 3,
167 + backgroundColor: "black",
168 + paddingBottom: 10
169 + },
170 + poster: {
171 + resizeMode: "cover",
172 + flex: 10,
173 + width: "30%",
174 + height: 160,
175 + marginLeft: 10,
176 + paddingHorizontal: 50,
177 + alignItems: "stretch",
178 + borderRadius: 7
179 + },
180 + name: {
181 + fontSize: 16,
182 + color: "white"
183 + },
184 + overview: {
185 + fontSize: 14,
186 + color: "white"
187 + }
188 +});
...@@ -12,7 +12,7 @@ import { ...@@ -12,7 +12,7 @@ import {
12 import { Icon } from "native-base"; 12 import { Icon } from "native-base";
13 import { AsyncStorage } from "react-native"; 13 import { AsyncStorage } from "react-native";
14 import axios from "axios"; 14 import axios from "axios";
15 -import WantToWatchTab from './WantToWatchTab'; 15 +import WantToWatchTab from "./WantToWatchTab";
16 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 16 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
17 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 17 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
18 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 18 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
...@@ -217,10 +217,11 @@ export default class MovieRankingTab extends Component { ...@@ -217,10 +217,11 @@ export default class MovieRankingTab extends Component {
217 //눌렀을 때 저장함수 217 //눌렀을 때 저장함수
218 _onPressButton(temp) { 218 _onPressButton(temp) {
219 //this.state.list = ""; //초기화(On Off 기능으로 짜놨습니당, 누적되는거 보고싶으면 이부분 주석달면 돼여) 219 //this.state.list = ""; //초기화(On Off 기능으로 짜놨습니당, 누적되는거 보고싶으면 이부분 주석달면 돼여)
220 - Alert.alert(temp);//메시지 띄우고 220 + // Alert.alert(temp); //메시지 띄우고
221 - this.state.list = this.state.list + temp + '\n'; //list 누적해준다(endl으로 구분) 221 + // this.state.list = this.state.list + temp + "\n"; //list 누적해준다(endl으로 구분)
222 - console.log(this.state.list);//콘솔에 log 띄운다 222 + // console.log(this.state.list); //콘솔에 log 띄운다
223 - AsyncStorage.setItem('MovieLists', this.state.list); //DB에 저장한다 223 + // AsyncStorage.setItem(`${temp}`, temp); //DB에 저장한다
224 + this.props.navigation.navigate("Detail", { title: temp });
224 //WantToWatchTab.render(); //새로고침 225 //WantToWatchTab.render(); //새로고침
225 } 226 }
226 227
...@@ -261,9 +262,9 @@ export default class MovieRankingTab extends Component { ...@@ -261,9 +262,9 @@ export default class MovieRankingTab extends Component {
261 )} 262 )}
262 > 263 >
263 <Text style={style.overview}> 264 <Text style={style.overview}>
264 - {this.state.overview0.length < 70 265 + {this.state.overview0.length < 60
265 ? `${this.state.overview0}` 266 ? `${this.state.overview0}`
266 - : `${this.state.overview0.substring(0, 65)}...\n `} 267 + : `${this.state.overview0.substring(0, 57)}...\n `}
267 </Text> 268 </Text>
268 </TouchableOpacity> 269 </TouchableOpacity>
269 </View> 270 </View>
...@@ -356,6 +357,47 @@ export default class MovieRankingTab extends Component { ...@@ -356,6 +357,47 @@ export default class MovieRankingTab extends Component {
356 <View style={style.lowContainer}> 357 <View style={style.lowContainer}>
357 <View style={style.leftContainer}> 358 <View style={style.leftContainer}>
358 <TouchableOpacity 359 <TouchableOpacity
360 + onPress={this._onPressButton.bind(this, `${this.state.name3}`)}
361 + >
362 + <Image
363 + style={style.poster}
364 + source={{
365 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
366 + }}
367 + />
368 + </TouchableOpacity>
369 + </View>
370 + <View style={style.rightContainer}>
371 + <View style={style.rightUpContainer}>
372 + <TouchableOpacity
373 + onPress={this._onPressButton.bind(
374 + this,
375 + `${this.state.name3}`
376 + )}
377 + >
378 + <Text style={style.name}>{this.state.name3}</Text>
379 + </TouchableOpacity>
380 + </View>
381 + <View style={style.rightDownContainer}>
382 + <TouchableOpacity
383 + onPress={this._onPressButton.bind(
384 + this,
385 + `${this.state.name3}`
386 + )}
387 + >
388 + <Text style={style.overview}>
389 + {this.state.overview3.length < 60
390 + ? `${this.state.overview3}`
391 + : `${this.state.overview3.substring(0, 57)}...\n`}
392 + </Text>
393 + </TouchableOpacity>
394 + </View>
395 + </View>
396 + </View>
397 + {/* 5위 */}
398 + <View style={style.lowContainer}>
399 + <View style={style.leftContainer}>
400 + <TouchableOpacity
359 onPress={this._onPressButton.bind(this, `${this.state.name4}`)} 401 onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
360 > 402 >
361 <Image 403 <Image
...@@ -381,7 +423,7 @@ export default class MovieRankingTab extends Component { ...@@ -381,7 +423,7 @@ export default class MovieRankingTab extends Component {
381 <TouchableOpacity 423 <TouchableOpacity
382 onPress={this._onPressButton.bind( 424 onPress={this._onPressButton.bind(
383 this, 425 this,
384 - `${this.state.name4}` 426 + `${this.state.name1}`
385 )} 427 )}
386 > 428 >
387 <Text style={style.overview}> 429 <Text style={style.overview}>
...@@ -393,15 +435,16 @@ export default class MovieRankingTab extends Component { ...@@ -393,15 +435,16 @@ export default class MovieRankingTab extends Component {
393 </View> 435 </View>
394 </View> 436 </View>
395 </View> 437 </View>
438 + {/* 6위 */}
396 <View style={style.lowContainer}> 439 <View style={style.lowContainer}>
397 <View style={style.leftContainer}> 440 <View style={style.leftContainer}>
398 <TouchableOpacity 441 <TouchableOpacity
399 - onPress={this._onPressButton.bind(this, `${this.state.name1}`)} 442 + onPress={this._onPressButton.bind(this, `${this.state.name5}`)}
400 > 443 >
401 <Image 444 <Image
402 style={style.poster} 445 style={style.poster}
403 source={{ 446 source={{
404 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}` 447 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
405 }} 448 }}
406 /> 449 />
407 </TouchableOpacity> 450 </TouchableOpacity>
...@@ -411,37 +454,38 @@ export default class MovieRankingTab extends Component { ...@@ -411,37 +454,38 @@ export default class MovieRankingTab extends Component {
411 <TouchableOpacity 454 <TouchableOpacity
412 onPress={this._onPressButton.bind( 455 onPress={this._onPressButton.bind(
413 this, 456 this,
414 - `${this.state.name1}` 457 + `${this.state.name5}`
415 )} 458 )}
416 > 459 >
417 - <Text style={style.name}>{this.state.name1}</Text> 460 + <Text style={style.name}>{this.state.name5}</Text>
418 </TouchableOpacity> 461 </TouchableOpacity>
419 </View> 462 </View>
420 <View style={style.rightDownContainer}> 463 <View style={style.rightDownContainer}>
421 <TouchableOpacity 464 <TouchableOpacity
422 onPress={this._onPressButton.bind( 465 onPress={this._onPressButton.bind(
423 this, 466 this,
424 - `${this.state.name1}` 467 + `${this.state.name5}`
425 )} 468 )}
426 > 469 >
427 - <Text> 470 + <Text style={style.overview}>
428 - {this.state.overview1.length < 60 471 + {this.state.overview5.length < 60
429 - ? `${this.state.overview1}` 472 + ? `${this.state.overview5}`
430 - : `${this.state.overview1.substring(0, 57)}...\n`} 473 + : `${this.state.overview5.substring(0, 57)}...\n`}
431 </Text> 474 </Text>
432 </TouchableOpacity> 475 </TouchableOpacity>
433 </View> 476 </View>
434 </View> 477 </View>
435 </View> 478 </View>
479 + {/* 7위 */}
436 <View style={style.lowContainer}> 480 <View style={style.lowContainer}>
437 <View style={style.leftContainer}> 481 <View style={style.leftContainer}>
438 <TouchableOpacity 482 <TouchableOpacity
439 - onPress={this._onPressButton.bind(this, `${this.state.name1}`)} 483 + onPress={this._onPressButton.bind(this, `${this.state.name6}`)}
440 > 484 >
441 <Image 485 <Image
442 style={style.poster} 486 style={style.poster}
443 source={{ 487 source={{
444 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}` 488 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
445 }} 489 }}
446 /> 490 />
447 </TouchableOpacity> 491 </TouchableOpacity>
...@@ -451,37 +495,38 @@ export default class MovieRankingTab extends Component { ...@@ -451,37 +495,38 @@ export default class MovieRankingTab extends Component {
451 <TouchableOpacity 495 <TouchableOpacity
452 onPress={this._onPressButton.bind( 496 onPress={this._onPressButton.bind(
453 this, 497 this,
454 - `${this.state.name1}` 498 + `${this.state.name6}`
455 )} 499 )}
456 > 500 >
457 - <Text style={style.name}>{this.state.name1}</Text> 501 + <Text style={style.name}>{this.state.name6}</Text>
458 </TouchableOpacity> 502 </TouchableOpacity>
459 </View> 503 </View>
460 <View style={style.rightDownContainer}> 504 <View style={style.rightDownContainer}>
461 <TouchableOpacity 505 <TouchableOpacity
462 onPress={this._onPressButton.bind( 506 onPress={this._onPressButton.bind(
463 this, 507 this,
464 - `${this.state.name1}` 508 + `${this.state.name6}`
465 )} 509 )}
466 > 510 >
467 - <Text> 511 + <Text style={style.overview}>
468 - {this.state.overview1.length < 60 512 + {this.state.overview6.length < 60
469 - ? `${this.state.overview1}` 513 + ? `${this.state.overview6}`
470 - : `${this.state.overview1.substring(0, 57)}...\n`} 514 + : `${this.state.overview6.substring(0, 57)}...\n`}
471 </Text> 515 </Text>
472 </TouchableOpacity> 516 </TouchableOpacity>
473 </View> 517 </View>
474 </View> 518 </View>
475 </View> 519 </View>
520 + {/* 8위 */}
476 <View style={style.lowContainer}> 521 <View style={style.lowContainer}>
477 <View style={style.leftContainer}> 522 <View style={style.leftContainer}>
478 <TouchableOpacity 523 <TouchableOpacity
479 - onPress={this._onPressButton.bind(this, `${this.state.name1}`)} 524 + onPress={this._onPressButton.bind(this, `${this.state.name7}`)}
480 > 525 >
481 <Image 526 <Image
482 style={style.poster} 527 style={style.poster}
483 source={{ 528 source={{
484 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}` 529 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
485 }} 530 }}
486 /> 531 />
487 </TouchableOpacity> 532 </TouchableOpacity>
...@@ -491,37 +536,38 @@ export default class MovieRankingTab extends Component { ...@@ -491,37 +536,38 @@ export default class MovieRankingTab extends Component {
491 <TouchableOpacity 536 <TouchableOpacity
492 onPress={this._onPressButton.bind( 537 onPress={this._onPressButton.bind(
493 this, 538 this,
494 - `${this.state.name1}` 539 + `${this.state.name7}`
495 )} 540 )}
496 > 541 >
497 - <Text style={style.name}>{this.state.name1}</Text> 542 + <Text style={style.name}>{this.state.name7}</Text>
498 </TouchableOpacity> 543 </TouchableOpacity>
499 </View> 544 </View>
500 <View style={style.rightDownContainer}> 545 <View style={style.rightDownContainer}>
501 <TouchableOpacity 546 <TouchableOpacity
502 onPress={this._onPressButton.bind( 547 onPress={this._onPressButton.bind(
503 this, 548 this,
504 - `${this.state.name1}` 549 + `${this.state.name7}`
505 )} 550 )}
506 > 551 >
507 - <Text> 552 + <Text style={style.overview}>
508 - {this.state.overview1.length < 60 553 + {this.state.overview7.length < 60
509 - ? `${this.state.overview1}` 554 + ? `${this.state.overview7}`
510 - : `${this.state.overview1.substring(0, 57)}...\n`} 555 + : `${this.state.overview7.substring(0, 57)}...\n`}
511 </Text> 556 </Text>
512 </TouchableOpacity> 557 </TouchableOpacity>
513 </View> 558 </View>
514 </View> 559 </View>
515 </View> 560 </View>
561 + {/* 9위 */}
516 <View style={style.lowContainer}> 562 <View style={style.lowContainer}>
517 <View style={style.leftContainer}> 563 <View style={style.leftContainer}>
518 <TouchableOpacity 564 <TouchableOpacity
519 - onPress={this._onPressButton.bind(this, `${this.state.name1}`)} 565 + onPress={this._onPressButton.bind(this, `${this.state.name8}`)}
520 > 566 >
521 <Image 567 <Image
522 style={style.poster} 568 style={style.poster}
523 source={{ 569 source={{
524 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}` 570 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
525 }} 571 }}
526 /> 572 />
527 </TouchableOpacity> 573 </TouchableOpacity>
...@@ -531,23 +577,64 @@ export default class MovieRankingTab extends Component { ...@@ -531,23 +577,64 @@ export default class MovieRankingTab extends Component {
531 <TouchableOpacity 577 <TouchableOpacity
532 onPress={this._onPressButton.bind( 578 onPress={this._onPressButton.bind(
533 this, 579 this,
534 - `${this.state.name1}` 580 + `${this.state.name8}`
535 )} 581 )}
536 > 582 >
537 - <Text style={style.name}>{this.state.name1}</Text> 583 + <Text style={style.name}>{this.state.name8}</Text>
538 </TouchableOpacity> 584 </TouchableOpacity>
539 </View> 585 </View>
540 <View style={style.rightDownContainer}> 586 <View style={style.rightDownContainer}>
541 <TouchableOpacity 587 <TouchableOpacity
542 onPress={this._onPressButton.bind( 588 onPress={this._onPressButton.bind(
543 this, 589 this,
544 - `${this.state.name1}` 590 + `${this.state.name8}`
545 )} 591 )}
546 > 592 >
547 - <Text> 593 + <Text style={style.overview}>
548 - {this.state.overview1.length < 60 594 + {this.state.overview8.length < 60
549 - ? `${this.state.overview1}` 595 + ? `${this.state.overview8}`
550 - : `${this.state.overview1.substring(0, 57)}...\n`} 596 + : `${this.state.overview8.substring(0, 57)}...\n`}
597 + </Text>
598 + </TouchableOpacity>
599 + </View>
600 + </View>
601 + </View>
602 + {/* 10위 */}
603 + <View style={style.lowContainer}>
604 + <View style={style.leftContainer}>
605 + <TouchableOpacity
606 + onPress={this._onPressButton.bind(this, `${this.state.name9}`)}
607 + >
608 + <Image
609 + style={style.poster}
610 + source={{
611 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}`
612 + }}
613 + />
614 + </TouchableOpacity>
615 + </View>
616 + <View style={style.rightContainer}>
617 + <View style={style.rightUpContainer}>
618 + <TouchableOpacity
619 + onPress={this._onPressButton.bind(
620 + this,
621 + `${this.state.name9}`
622 + )}
623 + >
624 + <Text style={style.name}>{this.state.name9}</Text>
625 + </TouchableOpacity>
626 + </View>
627 + <View style={style.rightDownContainer}>
628 + <TouchableOpacity
629 + onPress={this._onPressButton.bind(
630 + this,
631 + `${this.state.name9}`
632 + )}
633 + >
634 + <Text style={style.overview}>
635 + {this.state.overview9.length < 60
636 + ? `${this.state.overview9}`
637 + : `${this.state.overview9.substring(0, 57)}...\n`}
551 </Text> 638 </Text>
552 </TouchableOpacity> 639 </TouchableOpacity>
553 </View> 640 </View>
......
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 import { 2 import {
3 StyleSheet, 3 StyleSheet,
4 Text, 4 Text,
5 View, 5 View,
6 TouchableOpacity, 6 TouchableOpacity,
7 AsyncStorage, 7 AsyncStorage,
8 + SafeAreaView,
8 ScrollView, 9 ScrollView,
9 - Image, 10 + Alert,
10 -} from 'react-native'; 11 + Image
11 -import { Icon } from "native-base"; 12 +} from "react-native";
13 +import { Card, CardItem, Icon } from "native-base";
12 import axios from "axios"; 14 import axios from "axios";
13 -import MovieRankingTab from './MovieRankingTab'; 15 +import MovieRankingTab from "./MovieRankingTab";
16 +import { symbol } from "prop-types";
14 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 17 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
15 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 18 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
16 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 19 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
17 20
18 -
19 export default class App extends Component { 21 export default class App extends Component {
20 state = { 22 state = {
21 - list: "", //영화 제목 list 23 + list: [], //영화 제목 list
22 date: "", //날짜 24 date: "", //날짜
23 - imgurl0: [], //이미지 25 + names: [], // api로 받아오 영화 제목
26 + imgurls: [], //이미지
24 name0: [], //제목 27 name0: [], //제목
25 - }; 28 + results: [], // json 오브젝트
26 - 29 + title: ""
27 - //날짜 정하기
28 - componentDidMount() {
29 - var day = new Date().getDate() - 1; // 어제 날짜
30 - if (day == 1) {
31 - day = 30;
32 - } else if (day < 10) {
33 - day = "0" + day;
34 - }
35 - var month = new Date().getMonth() + 1; //Current Month
36 - var year = new Date().getFullYear(); //Current Year
37 - var date = year + "" + month + day;
38 - this.getMovieList(date);
39 - this.setData();
40 - }
41 -
42 - getMovieList = async date => {
43 - axios
44 - .get(
45 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
46 - )
47 - .then(
48 - response => {
49 - this.setState({
50 - //영화 제목
51 - name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
52 - });
53 -
54 - temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
55 - fetch(
56 - `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
57 - {
58 - headers: {
59 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
60 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
61 - }
62 - }
63 - )
64 - .then(response => response.json())
65 - .then(json => {
66 - this.setState({
67 - imgurl0: json.items[0].image
68 - });
69 - });
70 - }
71 - )
72 - .catch(error => {
73 - console.log(error);
74 - });
75 }; 30 };
76 31
77 //네비게이션 바 32 //네비게이션 바
78 static navigationOptions = { 33 static navigationOptions = {
79 tabBarIcon: ({ tintColor }) => ( 34 tabBarIcon: ({ tintColor }) => (
80 - <Icon name='ios-star' style={{ color: tintColor }} /> 35 + <Icon name="ios-star" style={{ color: tintColor }} />
81 ) 36 )
82 - } 37 + };
83 38
84 //Data 설정함수 39 //Data 설정함수
85 setData = async () => { 40 setData = async () => {
86 try { 41 try {
87 //요거 바꿔봤다 42 //요거 바꿔봤다
88 - this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다 43 + // this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다
89 - console.log(this.state.list); //잘 뜨는데?? 44 + // console.log(this.state.list); //잘 뜨는데??
90 - } 45 + // const value = await AsyncStorage.getItem("@movieName:key");
91 - catch (error) { 46 + // if (value !== null) {
92 - alert(error) 47 + // We have data!!
48 + // await AsyncStorage.getAllKeys().then(console.log);
49 + this.state.list = await AsyncStorage.getAllKeys();
50 + // this.setState({
51 + // name0: this.state.list[0].name
52 + // });
53 + // console.log("확인용", this.state.list);
54 + // var cnt = this.state.list.length;
55 + // console.log(cnt);
56 + // var temp1 = [];
57 + // var temp2 = [];
58 + for (var i = 0; i < this.state.list.length; i++) {
59 + axios
60 + .get(
61 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
62 + )
63 + .then(response => {
64 + var joined = this.state.imgurls.concat(
65 + response.data.results[0].poster_path
66 + );
67 + // var joined = response.data.results[0].poster_path;
68 + // var name = response.data.results[0].title;
69 + // var name = this.state.list.concat(response.data.results[0].title);
70 + // temp1.push(joined);
71 + // temp2.push(name);
72 + // var temp = this.state.list.concat(response.data.results[0].title);
73 + var result = this.state.results.concat(response.data.results[0]);
74 +
75 + // var temp = [joined, name];
76 + // var tempObj = this.state.results.concat(temp);
77 + // this.setState({ imgurls: joined, names: name, results: tempObj });
78 + this.setState({
79 + imgurls: joined,
80 + results: result
81 + // results: [this.state.list, imgurls]
82 + });
83 + console.log("list", this.state.list);
84 + console.log("imgurls", this.state.imgurls);
85 + // console.log("results", this.state.imgurls);
86 + // var temp = [];
87 + // console.log(newobj);
88 + // console.log(joined);
89 + // console.log(response.data.results[0].title);
90 + // console.log(response.data.results[0].poster_path);
91 + // console.log(response.data.results);
92 + });
93 + // var newobj = [temp1, temp2];
94 + // this.setState({ results: newobj });
95 + // console.log(newobj);
96 +
97 + // var a = [1, 3, 4];
98 + // var b = [3, 4, 5];
99 + // var newobj = [a, b];
100 + // var newobj = [...this.state.imgurls, ...this.state.names];
101 + // console.log(newobj);
93 } 102 }
103 + } catch (error) {
104 + alert(error);
94 } 105 }
106 + };
95 107
108 + componentDidMount() {
109 + this.setData();
110 + // var cnt = this.state.list.length;
111 + // console.log(cnt);
112 + // this.getDB();
113 + }
96 114
97 render() { 115 render() {
98 return ( 116 return (
99 <View style={styles.container}> 117 <View style={styles.container}>
100 - <TouchableOpacity onPress={this.componentDidMount.bind(this)}> 118 + {/* <TouchableOpacity onPress={this.setData.bind(this)}> */}
101 {/* 버튼 누르면 리스트 갱신됩니다 */} 119 {/* 버튼 누르면 리스트 갱신됩니다 */}
102 - <Image source = {require('../../assets/refresh.png')} /> 120 + {/* <Image source={require("../../assets/refresh.png")} /> */}
103 {/* <Text style={styles.textStyle}>Refresh Button</Text> */} 121 {/* <Text style={styles.textStyle}>Refresh Button</Text> */}
104 - </TouchableOpacity> 122 + {/* </TouchableOpacity> */}
105 - <Text style={styles.textStyle}>{this.state.list}</Text> 123 + {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
124 + <SafeAreaView>
125 + <ScrollView>
126 + <Card>
127 + {/* <View>
128 + {this.state.list.map((item, i) => (
129 + <View style={styles.lowContainer}>
130 + <View style={styles.halfContainer}>
131 + <Text style={styles.textStyle} key={i}>
132 + {item}
133 + </Text>
134 + </View>
135 + <View style={styles.halfContainer}>
136 + <Text style={styles.textStyle} key={i}>
137 + {item}
138 + </Text>
139 + </View>
140 + </View>
141 + ))}
142 + </View> */}
143 + {/* {this.state.imgurls.map((val, index) => <Well data={val} desc={this.state.li[index]} key={index}/> */}
144 + {this.state.results.map(item => (
145 + <View style={styles.lowContainer}>
146 + <View>
147 + <CardItem>
148 + {
149 + <Image
150 + style={styles.poster}
151 + source={{
152 + uri: `https://image.tmdb.org/t/p/original/${item.poster_path}`
153 + }}
154 + />
155 + }
156 + </CardItem>
157 + <CardItem>
158 + <View>
159 + <Text style={styles.textStyle}>{item.title}</Text>
160 + </View>
161 + </CardItem>
162 + </View>
163 + </View>
164 + ))}
165 + </Card>
166 + </ScrollView>
167 + </SafeAreaView>
106 </View> 168 </View>
107 ); 169 );
108 } 170 }
...@@ -111,12 +173,38 @@ export default class App extends Component { ...@@ -111,12 +173,38 @@ export default class App extends Component {
111 const styles = StyleSheet.create({ 173 const styles = StyleSheet.create({
112 container: { 174 container: {
113 backgroundColor: "black", 175 backgroundColor: "black",
176 + flex: 1
177 + // alignItems: "center",
178 + // justifyContent: "center"
179 + },
180 + lowContainer: {
181 + flex: 1,
182 + flexDirection: "row",
183 + backgroundColor: "black",
184 + // alignContent: "space-around",
185 + justifyContent: "center",
186 + alignItems: "center"
187 + // marginLeft: 10,
188 + // marginTop: 10,
189 + // marginBottom: 20
190 + },
191 + halfContainer: {
114 flex: 1, 192 flex: 1,
115 - alignItems: "center", 193 + backgroundColor: "yellow",
116 - justifyContent: "center" 194 + justifyContent: "center",
195 + alignItems: "center"
196 + },
197 + poster: {
198 + // resizeMode: "cover",
199 + flex: 10,
200 + width: "40%",
201 + height: 120,
202 + paddingHorizontal: 58,
203 + alignItems: "stretch",
204 + borderRadius: 7
117 }, 205 },
118 textStyle: { 206 textStyle: {
119 fontSize: 25, 207 fontSize: 25,
120 - color: "white", 208 + color: "white"
121 -}, 209 + }
122 }); 210 });
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 import { StyleSheet, Text, View, Button } from "react-native"; 2 import { StyleSheet, Text, View, Button } from "react-native";
3 -import { Icon } from "native-base"; // 추가된 코드
4 import { createAppContainer } from "react-navigation"; 3 import { createAppContainer } from "react-navigation";
5 import { createStackNavigator } from "react-navigation-stack"; 4 import { createStackNavigator } from "react-navigation-stack";
6 import { createMaterialTopTabNavigator } from "react-navigation-tabs"; 5 import { createMaterialTopTabNavigator } from "react-navigation-tabs";
...@@ -8,18 +7,19 @@ import SeenMovieTab from "./AppTabNavigator/MovieRankingTab"; ...@@ -8,18 +7,19 @@ import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
8 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; 7 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
9 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab"; 8 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
10 import Search from ".//AppTabNavigator/Search"; 9 import Search from ".//AppTabNavigator/Search";
10 +import Detail from "./AppTabNavigator/Detail";
11 import { Platform } from "react-native"; 11 import { Platform } from "react-native";
12 -import { black } from "ansi-colors"; 12 +import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
13 -import { colors } from "react-native-elements";
14 -//import { Ionicons } from '@expo/vector-icons';
15 13
16 const AppTabNavigator = createMaterialTopTabNavigator( 14 const AppTabNavigator = createMaterialTopTabNavigator(
17 { 15 {
18 SeenMovieTab: { screen: SeenMovieTab }, 16 SeenMovieTab: { screen: SeenMovieTab },
19 MovieRankingTab: { screen: MovieRankingTab }, 17 MovieRankingTab: { screen: MovieRankingTab },
20 WantToWatchTab: { screen: WantToWatchTab }, 18 WantToWatchTab: { screen: WantToWatchTab },
21 - Search: { screen: Search } 19 + Search: { screen: Search },
20 + Detail: { screen: Detail }
22 }, 21 },
22 +
23 { 23 {
24 animationEnabled: true, 24 animationEnabled: true,
25 swipeEnabled: true, 25 swipeEnabled: true,
......