신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
신승민
f7ea7781 1 parent b9cbd619

Final

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