신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
e4864a8b 1 parent f61b7bc7

v1.1.0 +코드 리팩토링 -봤던 영화 목록

Inline Side-by-side
Showing 19 changed files with 510 additions and 974 deletions
...@@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from "react-native"; ...@@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from "react-native";
3 import { createAppContainer } from "react-navigation"; 3 import { createAppContainer } from "react-navigation";
4 import { createStackNavigator } from "react-navigation-stack"; 4 import { createStackNavigator } from "react-navigation-stack";
5 import MainScreen from "./Components/MainScreen"; 5 import MainScreen from "./Components/MainScreen";
6 -import Detail from "./Components/AppTabNavigator/Detail" 6 +import Detail from "./Components/AppTabNavigator/Detail";
7 // import MovieInfo from "./Components/MovieInfo"; 7 // import MovieInfo from "./Components/MovieInfo";
8 8
9 const AppStackNavigator = createStackNavigator({ 9 const AppStackNavigator = createStackNavigator({
10 Main: { 10 Main: {
11 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록 11 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
12 }, 12 },
13 - Datail:{ 13 + Datail: {
14 screen: Detail 14 screen: Detail
15 } 15 }
16 }); 16 });
......
...@@ -3,92 +3,117 @@ import { ...@@ -3,92 +3,117 @@ import {
3 View, 3 View,
4 Text, 4 Text,
5 StyleSheet, 5 StyleSheet,
6 - Button, 6 + Alert,
7 Image, 7 Image,
8 - TouchableOpacity 8 + TouchableOpacity,
9 + AsyncStorage
9 } from "react-native"; 10 } from "react-native";
10 import { Icon } from "native-base"; 11 import { Icon } from "native-base";
11 -import { Ionicons, AntDesign } from "@expo/vector-icons"; 12 +import { AntDesign } from "@expo/vector-icons";
12 -import { 13 +import { SafeAreaView, ScrollView } from "react-navigation";
13 - NavigationActions,
14 - createStackNavigator,
15 - withNavigation,
16 - SafeAreaView,
17 - ScrollView
18 -} from "react-navigation";
19 import axios from "axios"; 14 import axios from "axios";
20 -import { AsyncStorage } from "react-native"; 15 +import * as API from "../../API_Key.js";
16 +
17 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
21 18
22 export default class Detail extends Component { 19 export default class Detail extends Component {
20 + constructor(props) {
21 + super(props);
22 + this.state = {
23 + key: []
24 + };
25 + }
26 +
23 static navigationOptions = { 27 static navigationOptions = {
24 tabBarIcon: ({ tintColor }) => ( 28 tabBarIcon: ({ tintColor }) => (
25 <Icon name="ios-reorder" style={{ color: tintColor }} /> 29 <Icon name="ios-reorder" style={{ color: tintColor }} />
26 ) 30 )
27 }; 31 };
28 32
29 - state = { 33 + _AllKeys = async () => {
34 + try {
35 + tempKey = await AsyncStorage.getAllKeys();
36 + this.setState({
37 + key: tempKey
38 + });
39 + } catch (error) {}
40 + };
41 +
42 + _onPressButton = async title => {
43 + await this._AllKeys(); // 현재 키 this.state.key 에 초기화
44 + for (var value of this.state.key) {
45 + if (value == title) {
46 + Alert.alert(
47 + "알림",
48 + `즐겨찾기에 있는 영화입니다.`,
49 + [
50 + {
51 + text: "넹"
52 + }
53 + ],
54 + { cancelable: true }
55 + );
56 + return;
57 + }
58 + }
59 +
60 + AsyncStorage.setItem(title, title);
61 +
62 + Alert.alert(
63 + "알림",
64 + `즐겨찾기에 추가되었습니다.`,
65 + [
66 + {
67 + text: "넹"
68 + }
69 + ],
70 + { cancelable: true }
71 + );
72 +
73 + await this._AllKeys();
74 +
75 + var temp = {
30 title: "", 76 title: "",
31 - overview: "", 77 + backdrop_path: ""
32 - release_date: "",
33 - url: "",
34 - back: "",
35 - key: ""
36 }; 78 };
79 + var tempList = [];
80 + currkeys = this.state.key;
37 81
38 - getDB = async search => { 82 + for (let i = 0; i < currkeys.length; i++) {
39 - axios 83 + temp = {
84 + title: "",
85 + backdrop_path: ""
86 + };
87 + temp.title = currkeys[i];
88 + await axios
40 .get( 89 .get(
41 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1` 90 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp.title}&language=ko-KR&page=1`
42 ) 91 )
43 .then(response => { 92 .then(response => {
44 - this.setState({ 93 + temp.backdrop_path = response.data.results[0].backdrop_path;
45 - title: response.data.results[0].title, 94 + tempList.push(temp);
46 - overview: response.data.results[0].overview + "\n\n\n", 95 +
47 - release_date: response.data.results[0].release_date, 96 + if (i == this.state.key.length - 1) {
48 - url: response.data.results[0].poster_path, 97 + this.props.navigation.navigate("WantToWatchTab", {
49 - back: response.data.results[0].backdrop_path 98 + keys: tempList
50 }); 99 });
100 + }
51 }); 101 });
52 - };
53 - getNaverApi = async search => {
54 - fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
55 - headers: {
56 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
57 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
58 } 102 }
59 - })
60 - .then(response => response.json())
61 - .then(json => this.setState({ items: json.items }));
62 - };
63 -
64 - _AllKeys = async () => {
65 - try {
66 - this.state.key = await AsyncStorage.getAllKeys();
67 - console.log(this.state.key);
68 - } catch (error) {}
69 }; 103 };
70 104
71 componentDidMount() { 105 componentDidMount() {
72 this._AllKeys(); 106 this._AllKeys();
73 } 107 }
74 108
75 - _onPressButton() {
76 - this._AllKeys();
77 - for (var value of this.state.key) {
78 - if (value == this.state.title) {
79 - AsyncStorage.removeItem(this.state.title);
80 - console.log("1");
81 - return;
82 - }
83 - }
84 - AsyncStorage.setItem(this.state.title, this.state.title);
85 - console.log("2");
86 - }
87 -
88 render() { 109 render() {
89 const { navigation } = this.props; 110 const { navigation } = this.props;
90 - var temp = navigation.getParam("title", ""); 111 + var title = navigation.getParam("title", ""); // title 변수를 전달 받아옴, default 값은 "" 으로 설정
91 - this.getDB(temp); 112 + var overview = navigation.getParam("overview", ""); // overview 변수를 전달 받아옴, default 값은 "" 으로 설정
113 + var release_date = navigation.getParam("release_date", "");
114 + var url = navigation.getParam("url", "");
115 + var back = navigation.getParam("back", "");
116 +
92 return ( 117 return (
93 <SafeAreaView style={styles.container}> 118 <SafeAreaView style={styles.container}>
94 <ScrollView style={styles.container}> 119 <ScrollView style={styles.container}>
...@@ -97,7 +122,7 @@ export default class Detail extends Component { ...@@ -97,7 +122,7 @@ export default class Detail extends Component {
97 <View style={styles.backgroundContainer}> 122 <View style={styles.backgroundContainer}>
98 <Image 123 <Image
99 source={{ 124 source={{
100 - uri: `https://image.tmdb.org/t/p/original${this.state.back}` 125 + uri: `https://image.tmdb.org/t/p/original${back}`
101 }} 126 }}
102 style={styles.posterBack} 127 style={styles.posterBack}
103 /> 128 />
...@@ -105,33 +130,29 @@ export default class Detail extends Component { ...@@ -105,33 +130,29 @@ export default class Detail extends Component {
105 <View style={styles.overlay}> 130 <View style={styles.overlay}>
106 <Image 131 <Image
107 source={{ 132 source={{
108 - uri: `https://image.tmdb.org/t/p/original${this.state.url}` 133 + uri: `https://image.tmdb.org/t/p/original${url}`
109 }} 134 }}
110 style={styles.posterFront} 135 style={styles.posterFront}
111 /> 136 />
112 <View style={styles.posterTitle}> 137 <View style={styles.posterTitle}>
113 - <Text style={styles.Title}>{this.state.title}</Text> 138 + <Text style={styles.Title}>{title}</Text>
114 </View> 139 </View>
115 </View> 140 </View>
116 </View> 141 </View>
117 </View> 142 </View>
118 <View style={styles.container2}> 143 <View style={styles.container2}>
119 <View> 144 <View>
120 - <Text style={styles.name}>{this.state.title}</Text> 145 + <Text style={styles.name}>{title}</Text>
121 </View> 146 </View>
122 <View style={styles.lowContainer}> 147 <View style={styles.lowContainer}>
123 - <Text style={styles.overview}>{this.state.release_date}</Text> 148 + <Text style={styles.overview}>{release_date}</Text>
124 <View style={styles.buttonLayout}> 149 <View style={styles.buttonLayout}>
125 - <TouchableOpacity 150 + <TouchableOpacity onPress={() => this._onPressButton(title)}>
126 - // title="추가 "
127 - onPress={() => this._onPressButton()}
128 - >
129 <AntDesign name="star" color="yellow" style={styles.button} /> 151 <AntDesign name="star" color="yellow" style={styles.button} />
130 </TouchableOpacity> 152 </TouchableOpacity>
131 </View> 153 </View>
132 </View> 154 </View>
133 - <Text style={styles.overview}>{this.state.overview}</Text> 155 + <Text style={styles.overview}>{overview}</Text>
134 - {/* <Text style={styles.overview}>{this.state.url}</Text> */}
135 </View> 156 </View>
136 </ScrollView> 157 </ScrollView>
137 </SafeAreaView> 158 </SafeAreaView>
...@@ -139,8 +160,6 @@ export default class Detail extends Component { ...@@ -139,8 +160,6 @@ export default class Detail extends Component {
139 } 160 }
140 } 161 }
141 162
142 -//export default withNavigation(Detail);
143 -
144 const styles = StyleSheet.create({ 163 const styles = StyleSheet.create({
145 container: { 164 container: {
146 flex: 1, 165 flex: 1,
...@@ -164,10 +183,6 @@ const styles = StyleSheet.create({ ...@@ -164,10 +183,6 @@ const styles = StyleSheet.create({
164 }, 183 },
165 overlay: { 184 overlay: {
166 flexDirection: "row" 185 flexDirection: "row"
167 - // opacity: 0.5,
168 - // backgroundColor: "#000000"
169 - // alignItems: "center",
170 - // justifyContent: "flex-end"
171 }, 186 },
172 posterContainer: { 187 posterContainer: {
173 flex: 1, 188 flex: 1,
...@@ -180,43 +195,25 @@ const styles = StyleSheet.create({ ...@@ -180,43 +195,25 @@ const styles = StyleSheet.create({
180 justifyContent: "flex-end" 195 justifyContent: "flex-end"
181 }, 196 },
182 posterBack: { 197 posterBack: {
183 - // resizeMode: "cover",
184 - // flex: 10,
185 width: "100%", 198 width: "100%",
186 height: "100%" 199 height: "100%"
187 - // marginLeft: 10,
188 - // paddingHorizontal: 50
189 - // alignItems: "stretch",
190 - // alignItems: "center"
191 - // borderRadius: 7
192 }, 200 },
193 posterFront: { 201 posterFront: {
194 - // resizeMode: "cover",
195 - // alignItems: "center",
196 - // justifyContent: "flex-end",
197 - // flex: 10,
198 marginTop: 100, 202 marginTop: 100,
199 marginLeft: 10, 203 marginLeft: 10,
200 marginBottom: 10, 204 marginBottom: 10,
201 width: 120, 205 width: 120,
202 height: 160 206 height: 160
203 - // marginLeft: 10,
204 - // paddingHorizontal: 45,
205 - // alignItems: "stretch",
206 - // borderRadius: 7
207 }, 207 },
208 208
209 buttonLayout: { 209 buttonLayout: {
210 marginLeft: "auto", 210 marginLeft: "auto",
211 marginRight: 20, 211 marginRight: 20,
212 justifyContent: "space-around", 212 justifyContent: "space-around",
213 - // marginBottom: 10,
214 flexDirection: "row" 213 flexDirection: "row"
215 }, 214 },
216 button: { 215 button: {
217 fontSize: 30 216 fontSize: 30
218 - // width: 30,
219 - // height: 30
220 }, 217 },
221 searchContainer: { 218 searchContainer: {
222 backgroundColor: "black", 219 backgroundColor: "black",
...@@ -248,8 +245,6 @@ const styles = StyleSheet.create({ ...@@ -248,8 +245,6 @@ const styles = StyleSheet.create({
248 backgroundColor: "black", 245 backgroundColor: "black",
249 flex: 1, 246 flex: 1,
250 flexDirection: "row" 247 flexDirection: "row"
251 - // justifyContent: "center",
252 - // alignItems: "center"
253 }, 248 },
254 leftContainer: { 249 leftContainer: {
255 flex: 1, 250 flex: 1,
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 import { 2 import {
3 View, 3 View,
4 - Text,
5 StyleSheet, 4 StyleSheet,
6 - Image,
7 SafeAreaView, 5 SafeAreaView,
8 ScrollView, 6 ScrollView,
9 - Alert, 7 + FlatList,
10 - TouchableOpacity 8 + AsyncStorage
11 } from "react-native"; 9 } from "react-native";
12 import { Icon } from "native-base"; 10 import { Icon } from "native-base";
13 -import { AsyncStorage } from "react-native";
14 import axios from "axios"; 11 import axios from "axios";
15 -import WantToWatchTab from "./WantToWatchTab"; 12 +import RankUI from "./RankUI";
16 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 13 +import * as API from "../../API_Key.js";
17 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
18 -const NAVER_CLIENT_SECRET = "0GRb3uya1U";
19 14
20 -//List 전역변수 선언하기 15 +const API_KEY = API.getAPI_KEY1(); // 영하 순위 받아오기
21 -//list = ""; 16 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
22 17
23 export default class MovieRankingTab extends Component { 18 export default class MovieRankingTab extends Component {
24 state = { 19 state = {
25 - list: "", //Add하고 싶은 정보 list 20 + rankingList: []
26 - flag: false, //WantToWatchTab을 새로고침 할지 말지 여부
27 - isLoading: true,
28 - info: [],
29 - date: "",
30 - name0: [],
31 - name1: [],
32 - name2: [],
33 - name3: [],
34 - name4: [],
35 - name5: [],
36 - name6: [],
37 - name7: [],
38 - name8: [],
39 - name9: [],
40 - imgur0: [],
41 - imgurl: [],
42 - imgur2: [],
43 - imgur3: [],
44 - imgur4: [],
45 - imgur5: [],
46 - imgur6: [],
47 - imgur7: [],
48 - imgur8: [],
49 - imgur9: [],
50 - overview0: [],
51 - overview1: [],
52 - overview2: [],
53 - overview3: [],
54 - overview4: [],
55 - overview5: [],
56 - overview6: [],
57 - overview7: [],
58 - overview8: [],
59 - overview9: []
60 }; 21 };
61 static navigationOptions = { 22 static navigationOptions = {
62 tabBarIcon: ({ tintColor }) => ( 23 tabBarIcon: ({ tintColor }) => (
...@@ -70,132 +31,45 @@ export default class MovieRankingTab extends Component { ...@@ -70,132 +31,45 @@ export default class MovieRankingTab extends Component {
70 `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}` 31 `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
71 ) 32 )
72 .then(response => { 33 .then(response => {
73 - this.setState({ 34 + var ranking = response.data.boxOfficeResult.dailyBoxOfficeList;
74 - name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
75 - name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
76 - name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
77 - name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
78 - name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
79 - name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
80 - name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
81 - name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
82 - name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
83 - name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
84 - info: response.data.boxOfficeResult.dailyBoxOfficeList
85 - });
86 35
87 - name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm; 36 + var infos = []; // 전체 정보
88 - axios
89 - .get(
90 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
91 - )
92 - .then(response => {
93 - this.setState({
94 - imgurl0: response.data.results[0].poster_path,
95 - overview0: response.data.results[0].overview
96 - });
97 - });
98 37
99 - name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm; 38 + var info = {
100 - axios 39 + // 객체 생성
101 - .get( 40 + name: "",
102 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 41 + url: "",
103 - ) 42 + overview: ""
104 - .then(response => { 43 + };
105 - this.setState({
106 - imgurl1: response.data.results[0].poster_path,
107 - overview1: response.data.results[0].overview
108 - });
109 - });
110 44
111 - name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm; 45 + // 랭킹 순으로 이름 정보 가져오기
112 - axios 46 + for (let i = 0; i < 10; i++) {
113 - .get( 47 + info.name = ranking[i].movieNm;
114 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 48 + infos.push(info);
115 - ) 49 + info = {
116 - .then(response => { 50 + name: "",
117 - this.setState({ 51 + url: "",
118 - imgurl2: response.data.results[0].poster_path, 52 + overview: ""
119 - overview2: response.data.results[0].overview 53 + };
120 - }); 54 + }
121 - }); 55 +
122 - name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm; 56 + // 영화이름으로 포스터 url, 줄거리 가져오기
123 - axios 57 + for (let i = 0; i < 10; i++) {
124 - .get( 58 + name = infos[i].name;
125 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
126 - )
127 - .then(response => {
128 - this.setState({
129 - imgurl3: response.data.results[0].poster_path,
130 - overview3: response.data.results[0].overview
131 - });
132 - });
133 - name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
134 - axios
135 - .get(
136 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
137 - )
138 - .then(response => {
139 - this.setState({
140 - imgurl4: response.data.results[0].poster_path,
141 - overview4: response.data.results[0].overview
142 - });
143 - });
144 - name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
145 - axios
146 - .get(
147 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
148 - )
149 - .then(response => {
150 - this.setState({
151 - imgurl5: response.data.results[0].poster_path,
152 - overview5: response.data.results[0].overview
153 - });
154 - });
155 - name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
156 - axios
157 - .get(
158 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
159 - )
160 - .then(response => {
161 - this.setState({
162 - imgurl6: response.data.results[0].poster_path,
163 - overview6: response.data.results[0].overview
164 - });
165 - });
166 - name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
167 - axios
168 - .get(
169 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
170 - )
171 - .then(response => {
172 - this.setState({
173 - imgurl7: response.data.results[0].poster_path,
174 - overview7: response.data.results[0].overview
175 - });
176 - });
177 - name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
178 - axios
179 - .get(
180 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
181 - )
182 - .then(response => {
183 - this.setState({
184 - imgurl8: response.data.results[0].poster_path,
185 - overview8: response.data.results[0].overview
186 - });
187 - });
188 - name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
189 axios 59 axios
190 .get( 60 .get(
191 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 61 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${name}&language=ko-KR&page=1`
192 ) 62 )
193 .then(response => { 63 .then(response => {
64 + infos[i].url = response.data.results[0].poster_path;
65 + infos[i].overview = response.data.results[0].overview;
66 + if (i == 9) {
194 this.setState({ 67 this.setState({
195 - imgurl9: response.data.results[0].poster_path, 68 + rankingList: infos
196 - overview9: response.data.results[0].overview
197 }); 69 });
70 + }
198 }); 71 });
72 + }
199 }) 73 })
200 .catch(error => { 74 .catch(error => {
201 console.log(error); 75 console.log(error);
...@@ -206,522 +80,73 @@ export default class MovieRankingTab extends Component { ...@@ -206,522 +80,73 @@ export default class MovieRankingTab extends Component {
206 value = await AsyncStorage.getItem(key); 80 value = await AsyncStorage.getItem(key);
207 console.log(value); 81 console.log(value);
208 }; 82 };
83 +
209 componentDidMount() { 84 componentDidMount() {
210 - var day = new Date().getDate() - 1; // 어제 날짜 85 + var month = new Date().getMonth() + 1; //Current Month
86 + if (month < 10) {
87 + month = "0" + month;
88 + }
89 + var day = new Date().getDate() - 1; // 어제 일짜
211 if (day == 1) { 90 if (day == 1) {
212 day = 30; 91 day = 30;
92 + month = month - 1;
93 + if (month == 0) {
94 + month == 12;
95 + }
213 } else if (day < 10) { 96 } else if (day < 10) {
214 day = "0" + day; 97 day = "0" + day;
215 } 98 }
216 - var month = new Date().getMonth() + 1; //Current Month
217 var year = new Date().getFullYear(); //Current Year 99 var year = new Date().getFullYear(); //Current Year
218 var date = year + "" + month + day; 100 var date = year + "" + month + day;
219 this.getMovieList(date); 101 this.getMovieList(date);
220 -
221 - //this.printData('쥬만지: 넥스트 레벨')
222 } 102 }
223 103
224 - //눌렀을 때 저장함수 104 + //눌렀을 때 디테일 텝으로 이동
225 - _onPressButton(temp) { 105 + _onPressButton = async temp => {
226 - //this.state.list = ""; //초기화(On Off 기능으로 짜놨습니당, 누적되는거 보고싶으면 이부분 주석달면 돼여) 106 + axios
227 - // Alert.alert(temp); //메시지 띄우고 107 + .get(
228 - // this.state.list = this.state.list + temp + "\n"; //list 누적해준다(endl으로 구분) 108 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
229 - // console.log(this.state.list); //콘솔에 log 띄운다 109 + )
230 - // AsyncStorage.setItem(`${temp}`, temp); //DB에 저장한다 110 + .then(response => {
231 - this.props.navigation.navigate("Detail", { title: temp }); 111 + var data = response.data.results[0];
232 - //WantToWatchTab.render(); //새로고침 112 + this.props.navigation.navigate("Detail", {
233 - } 113 + title: data.title,
114 + overview: data.overview + "\n\n\n",
115 + release_date: data.release_date,
116 + url: data.poster_path,
117 + back: data.backdrop_path
118 + });
119 + });
120 + };
234 121
235 render() { 122 render() {
236 return ( 123 return (
237 <SafeAreaView style={style.container}> 124 <SafeAreaView style={style.container}>
238 - <ScrollView style={style.scrollView}> 125 + <ScrollView>
239 - {/* ----- 1위 ----- */} 126 + <FlatList
240 - <View style={style.lowContainer}> 127 + data={this.state.rankingList}
241 - <View style={style.leftContainer}> 128 + renderItem={({ item }) => {
242 - <TouchableOpacity 129 + return (
243 - onPress={this._onPressButton.bind(this, `${this.state.name0}`)} 130 + <View>
244 - > 131 + <RankUI
245 - <Image 132 + name={item.name}
246 - style={style.poster} 133 + imgur={item.url}
247 - source={{ 134 + overview={item.overview}
248 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl0}` 135 + _onPress={this._onPressButton.bind(this, `${item.name}`)}
249 - }}
250 - />
251 - </TouchableOpacity>
252 - </View>
253 - <View style={style.rightContainer}>
254 - <View style={style.rightUpContainer}>
255 - <TouchableOpacity
256 - onPress={this._onPressButton.bind(
257 - this,
258 - `${this.state.name0}`
259 - )}
260 - >
261 - <Text style={style.name}>{this.state.name0}</Text>
262 - </TouchableOpacity>
263 - </View>
264 - <View style={style.rightDownContainer}>
265 - <TouchableOpacity
266 - onPress={this._onPressButton.bind(
267 - this,
268 - `${this.state.name0}`
269 - )}
270 - >
271 - <Text style={style.overview}>
272 - {this.state.overview0.length < 60
273 - ? `${this.state.overview0}`
274 - : `${this.state.overview0.substring(0, 57)}...\n `}
275 - </Text>
276 - </TouchableOpacity>
277 - </View>
278 - </View>
279 - </View>
280 -
281 - {/* ----- 2위 ----- */}
282 - <View style={style.lowContainer}>
283 - <View style={style.leftContainer}>
284 - <TouchableOpacity
285 - onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
286 - >
287 - <Image
288 - style={style.poster}
289 - source={{
290 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
291 - }}
292 - />
293 - </TouchableOpacity>
294 - </View>
295 - <View style={style.rightContainer}>
296 - <View style={style.rightUpContainer}>
297 - <TouchableOpacity
298 - onPress={this._onPressButton.bind(
299 - this,
300 - `${this.state.name1}`
301 - )}
302 - >
303 - <Text style={style.name}>{this.state.name1}</Text>
304 - </TouchableOpacity>
305 - </View>
306 - <View style={style.rightDownContainer}>
307 - <TouchableOpacity
308 - onPress={this._onPressButton.bind(
309 - this,
310 - `${this.state.name1}`
311 - )}
312 - >
313 - <Text style={style.overview}>
314 - {this.state.overview1.length < 60
315 - ? `${this.state.overview1}`
316 - : `${this.state.overview1.substring(0, 57)}...\n`}
317 - </Text>
318 - </TouchableOpacity>
319 - </View>
320 - </View>
321 - </View>
322 - {/* ----- 3위 ----- */}
323 - <View style={style.lowContainer}>
324 - <View style={style.leftContainer}>
325 - <TouchableOpacity
326 - onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
327 - >
328 - <Image
329 - style={style.poster}
330 - source={{
331 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
332 - }}
333 - />
334 - </TouchableOpacity>
335 - </View>
336 - <View style={style.rightContainer}>
337 - <View style={style.rightUpContainer}>
338 - <TouchableOpacity
339 - onPress={this._onPressButton.bind(
340 - this,
341 - `${this.state.name2}`
342 - )}
343 - >
344 - <Text style={style.name}>{this.state.name2}</Text>
345 - </TouchableOpacity>
346 - </View>
347 - <View style={style.rightDownContainer}>
348 - <TouchableOpacity
349 - onPress={this._onPressButton.bind(
350 - this,
351 - `${this.state.name2}`
352 - )}
353 - >
354 - <Text style={style.overview}>
355 - {this.state.overview2.length < 60
356 - ? `${this.state.overview2}`
357 - : `${this.state.overview2.substring(0, 57)}...\n`}
358 - </Text>
359 - </TouchableOpacity>
360 - </View>
361 - </View>
362 - </View>
363 - {/* ----- 4위 ----- */}
364 - <View style={style.lowContainer}>
365 - <View style={style.leftContainer}>
366 - <TouchableOpacity
367 - onPress={this._onPressButton.bind(this, `${this.state.name3}`)}
368 - >
369 - <Image
370 - style={style.poster}
371 - source={{
372 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
373 - }}
374 - />
375 - </TouchableOpacity>
376 - </View>
377 - <View style={style.rightContainer}>
378 - <View style={style.rightUpContainer}>
379 - <TouchableOpacity
380 - onPress={this._onPressButton.bind(
381 - this,
382 - `${this.state.name3}`
383 - )}
384 - >
385 - <Text style={style.name}>{this.state.name3}</Text>
386 - </TouchableOpacity>
387 - </View>
388 - <View style={style.rightDownContainer}>
389 - <TouchableOpacity
390 - onPress={this._onPressButton.bind(
391 - this,
392 - `${this.state.name3}`
393 - )}
394 - >
395 - <Text style={style.overview}>
396 - {this.state.overview3.length < 60
397 - ? `${this.state.overview3}`
398 - : `${this.state.overview3.substring(0, 57)}...\n`}
399 - </Text>
400 - </TouchableOpacity>
401 - </View>
402 - </View>
403 - </View>
404 - {/* 5위 */}
405 - <View style={style.lowContainer}>
406 - <View style={style.leftContainer}>
407 - <TouchableOpacity
408 - onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
409 - >
410 - <Image
411 - style={style.poster}
412 - source={{
413 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
414 - }}
415 - />
416 - </TouchableOpacity>
417 - </View>
418 - <View style={style.rightContainer}>
419 - <View style={style.rightUpContainer}>
420 - <TouchableOpacity
421 - onPress={this._onPressButton.bind(
422 - this,
423 - `${this.state.name4}`
424 - )}
425 - >
426 - <Text style={style.name}>{this.state.name4}</Text>
427 - </TouchableOpacity>
428 - </View>
429 - <View style={style.rightDownContainer}>
430 - <TouchableOpacity
431 - onPress={this._onPressButton.bind(
432 - this,
433 - `${this.state.name1}`
434 - )}
435 - >
436 - <Text style={style.overview}>
437 - {this.state.overview4.length < 60
438 - ? `${this.state.overview4}`
439 - : `${this.state.overview4.substring(0, 57)}...\n`}
440 - </Text>
441 - </TouchableOpacity>
442 - </View>
443 - </View>
444 - </View>
445 - {/* 6위 */}
446 - <View style={style.lowContainer}>
447 - <View style={style.leftContainer}>
448 - <TouchableOpacity
449 - onPress={this._onPressButton.bind(this, `${this.state.name5}`)}
450 - >
451 - <Image
452 - style={style.poster}
453 - source={{
454 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
455 - }}
456 - />
457 - </TouchableOpacity>
458 - </View>
459 - <View style={style.rightContainer}>
460 - <View style={style.rightUpContainer}>
461 - <TouchableOpacity
462 - onPress={this._onPressButton.bind(
463 - this,
464 - `${this.state.name5}`
465 - )}
466 - >
467 - <Text style={style.name}>{this.state.name5}</Text>
468 - </TouchableOpacity>
469 - </View>
470 - <View style={style.rightDownContainer}>
471 - <TouchableOpacity
472 - onPress={this._onPressButton.bind(
473 - this,
474 - `${this.state.name5}`
475 - )}
476 - >
477 - <Text style={style.overview}>
478 - {this.state.overview5.length < 60
479 - ? `${this.state.overview5}`
480 - : `${this.state.overview5.substring(0, 57)}...\n`}
481 - </Text>
482 - </TouchableOpacity>
483 - </View>
484 - </View>
485 - </View>
486 - {/* 7위 */}
487 - <View style={style.lowContainer}>
488 - <View style={style.leftContainer}>
489 - <TouchableOpacity
490 - onPress={this._onPressButton.bind(this, `${this.state.name6}`)}
491 - >
492 - <Image
493 - style={style.poster}
494 - source={{
495 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
496 - }}
497 - />
498 - </TouchableOpacity>
499 - </View>
500 - <View style={style.rightContainer}>
501 - <View style={style.rightUpContainer}>
502 - <TouchableOpacity
503 - onPress={this._onPressButton.bind(
504 - this,
505 - `${this.state.name6}`
506 - )}
507 - >
508 - <Text style={style.name}>{this.state.name6}</Text>
509 - </TouchableOpacity>
510 - </View>
511 - <View style={style.rightDownContainer}>
512 - <TouchableOpacity
513 - onPress={this._onPressButton.bind(
514 - this,
515 - `${this.state.name6}`
516 - )}
517 - >
518 - <Text style={style.overview}>
519 - {this.state.overview6.length < 60
520 - ? `${this.state.overview6}`
521 - : `${this.state.overview6.substring(0, 57)}...\n`}
522 - </Text>
523 - </TouchableOpacity>
524 - </View>
525 - </View>
526 - </View>
527 - {/* 8위 */}
528 - <View style={style.lowContainer}>
529 - <View style={style.leftContainer}>
530 - <TouchableOpacity
531 - onPress={this._onPressButton.bind(this, `${this.state.name7}`)}
532 - >
533 - <Image
534 - style={style.poster}
535 - source={{
536 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
537 - }}
538 - />
539 - </TouchableOpacity>
540 - </View>
541 - <View style={style.rightContainer}>
542 - <View style={style.rightUpContainer}>
543 - <TouchableOpacity
544 - onPress={this._onPressButton.bind(
545 - this,
546 - `${this.state.name7}`
547 - )}
548 - >
549 - <Text style={style.name}>{this.state.name7}</Text>
550 - </TouchableOpacity>
551 - </View>
552 - <View style={style.rightDownContainer}>
553 - <TouchableOpacity
554 - onPress={this._onPressButton.bind(
555 - this,
556 - `${this.state.name7}`
557 - )}
558 - >
559 - <Text style={style.overview}>
560 - {this.state.overview7.length < 60
561 - ? `${this.state.overview7}`
562 - : `${this.state.overview7.substring(0, 57)}...\n`}
563 - </Text>
564 - </TouchableOpacity>
565 - </View>
566 - </View>
567 - </View>
568 - {/* 9위 */}
569 - <View style={style.lowContainer}>
570 - <View style={style.leftContainer}>
571 - <TouchableOpacity
572 - onPress={this._onPressButton.bind(this, `${this.state.name8}`)}
573 - >
574 - <Image
575 - style={style.poster}
576 - source={{
577 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
578 - }}
579 /> 136 />
580 - </TouchableOpacity>
581 </View> 137 </View>
582 - <View style={style.rightContainer}> 138 + );
583 - <View style={style.rightUpContainer}>
584 - <TouchableOpacity
585 - onPress={this._onPressButton.bind(
586 - this,
587 - `${this.state.name8}`
588 - )}
589 - >
590 - <Text style={style.name}>{this.state.name8}</Text>
591 - </TouchableOpacity>
592 - </View>
593 - <View style={style.rightDownContainer}>
594 - <TouchableOpacity
595 - onPress={this._onPressButton.bind(
596 - this,
597 - `${this.state.name8}`
598 - )}
599 - >
600 - <Text style={style.overview}>
601 - {this.state.overview8.length < 60
602 - ? `${this.state.overview8}`
603 - : `${this.state.overview8.substring(0, 57)}...\n`}
604 - </Text>
605 - </TouchableOpacity>
606 - </View>
607 - </View>
608 - </View>
609 - {/* 10위 */}
610 - <View style={style.lowContainer}>
611 - <View style={style.leftContainer}>
612 - <TouchableOpacity
613 - onPress={this._onPressButton.bind(this, `${this.state.name9}`)}
614 - >
615 - <Image
616 - style={style.poster}
617 - source={{
618 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}`
619 }} 139 }}
620 /> 140 />
621 - </TouchableOpacity>
622 - </View>
623 - <View style={style.rightContainer}>
624 - <View style={style.rightUpContainer}>
625 - <TouchableOpacity
626 - onPress={this._onPressButton.bind(
627 - this,
628 - `${this.state.name9}`
629 - )}
630 - >
631 - <Text style={style.name}>{this.state.name9}</Text>
632 - </TouchableOpacity>
633 - </View>
634 - <View style={style.rightDownContainer}>
635 - <TouchableOpacity
636 - onPress={this._onPressButton.bind(
637 - this,
638 - `${this.state.name9}`
639 - )}
640 - >
641 - <Text style={style.overview}>
642 - {this.state.overview9.length < 60
643 - ? `${this.state.overview9}`
644 - : `${this.state.overview9.substring(0, 57)}...\n`}
645 - </Text>
646 - </TouchableOpacity>
647 - </View>
648 - </View>
649 - </View>
650 </ScrollView> 141 </ScrollView>
651 </SafeAreaView> 142 </SafeAreaView>
652 ); 143 );
653 } 144 }
654 } 145 }
146 +
655 const style = StyleSheet.create({ 147 const style = StyleSheet.create({
656 container: { 148 container: {
657 flex: 1, 149 flex: 1,
658 backgroundColor: "black" 150 backgroundColor: "black"
659 - },
660 - scrollView: {
661 - // backgroundColor: "black",
662 - // justifyContent: "center",
663 - // alignItems: "center"
664 - },
665 - title: {
666 - fontSize: 20,
667 - justifyContent: "center",
668 - alignItems: "center"
669 - },
670 - lowContainer: {
671 - flex: 1,
672 - flexDirection: "row",
673 - // backgroundColor: "black",
674 - // alignContent: "space-around",
675 - justifyContent: "center",
676 - alignItems: "center",
677 - marginLeft: 10,
678 - marginTop: 10,
679 - marginBottom: 20
680 - },
681 - leftContainer: {
682 - flex: 1,
683 - // backgroundColor: "yellow",
684 - justifyContent: "center",
685 - alignItems: "center"
686 - },
687 - rightContainer: {
688 - flex: 2
689 - // flexDirection: "column",
690 - // backgroundColor: "yellow"
691 - },
692 - rightUpContainer: {
693 - flex: 1,
694 - paddingTop: 15,
695 - // backgroundColor: "blue",
696 - justifyContent: "center",
697 - marginLeft: 20
698 - // alignItems: "center"
699 - },
700 - rightDownContainer: {
701 - flex: 3,
702 - // backgroundColor: "red",
703 - // margin: "5%"
704 - paddingTop: 20,
705 - paddingBottom: 10,
706 - padding: 15
707 - // justifyContent: "center",
708 - // alignItems: "center"
709 - },
710 - poster: {
711 - resizeMode: "cover",
712 - flex: 10,
713 - width: "40%",
714 - height: 40,
715 - paddingHorizontal: 58,
716 - alignItems: "stretch",
717 - borderRadius: 7
718 - },
719 - name: {
720 - fontSize: 16,
721 - color: "white"
722 - },
723 - overview: {
724 - fontSize: 14,
725 - color: "white"
726 } 151 }
727 }); 152 });
......
1 +import React, { Component } from "react";
2 +import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
3 +import { CardItem } from "native-base";
4 +
5 +export default class MyList extends Component {
6 + static defaultProps = {
7 + name: "",
8 + backdrop_path: "",
9 + _onPress: () => null
10 + };
11 +
12 + constructor(props) {
13 + super(props);
14 + }
15 +
16 + render() {
17 + return (
18 + <View style={styles.lowContainer}>
19 + <View style={styles.leftContainer}>
20 + <CardItem style={styles.container}>
21 + {
22 + <TouchableOpacity onPress={this.props._onPress}>
23 + <Image
24 + style={styles.poster}
25 + source={{
26 + uri: `https://image.tmdb.org/t/p/original/${this.props.backdrop_path}`
27 + }}
28 + />
29 + </TouchableOpacity>
30 + }
31 + </CardItem>
32 + </View>
33 + <View style={styles.rightContainer}>
34 + <CardItem style={styles.container}>
35 + <View style={styles.container}>
36 + <TouchableOpacity onPress={this.props._onPress}>
37 + <Text style={styles.textStyle}>{this.props.name}</Text>
38 + </TouchableOpacity>
39 + </View>
40 + </CardItem>
41 + </View>
42 + </View>
43 + );
44 + }
45 +}
46 +
47 +const styles = StyleSheet.create({
48 + container: {
49 + backgroundColor: "black",
50 + flex: 1
51 + },
52 + lowContainer: {
53 + marginLeft: 15,
54 + backgroundColor: "black",
55 + flex: 1,
56 + flexDirection: "row",
57 + justifyContent: "center",
58 + alignItems: "center"
59 + },
60 + leftContainer: {
61 + flex: 1,
62 + backgroundColor: "black",
63 + justifyContent: "center",
64 + alignItems: "center"
65 + },
66 + rightContainer: {
67 + flex: 2,
68 + backgroundColor: "black"
69 + },
70 + poster: {
71 + resizeMode: "cover",
72 + flex: 10,
73 + width: "40%",
74 + height: 80,
75 + paddingHorizontal: 58,
76 + alignItems: "stretch",
77 + borderRadius: 7
78 + },
79 + textStyle: {
80 + fontSize: 16,
81 + color: "white"
82 + }
83 +});
1 +import React, { Component } from "react";
2 +import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
3 +
4 +export default class RankUI extends Component {
5 + static defaultProps = {
6 + name: "",
7 + imgur: "",
8 + overview: "",
9 + _onPress: () => null
10 + };
11 +
12 + constructor(props) {
13 + super(props);
14 + }
15 +
16 + render() {
17 + return (
18 + <View style={style.lowContainer}>
19 + <View style={style.leftContainer}>
20 + <TouchableOpacity onPress={this.props._onPress}>
21 + <Image
22 + style={style.poster}
23 + source={{
24 + uri: `https://image.tmdb.org/t/p/original/${this.props.imgur}`
25 + }}
26 + />
27 + </TouchableOpacity>
28 + </View>
29 + <View style={style.rightContainer}>
30 + <View style={style.rightUpContainer}>
31 + <TouchableOpacity onPress={this.props._onPress}>
32 + <Text style={style.name}>{this.props.name}</Text>
33 + </TouchableOpacity>
34 + </View>
35 + <View style={style.rightDownContainer}>
36 + <TouchableOpacity onPress={this.props._onPress}>
37 + <Text style={style.overview}>
38 + {this.props.overview.length < 60
39 + ? `${this.props.overview}`
40 + : `${this.props.overview.substring(0, 57)}...\n `}
41 + </Text>
42 + </TouchableOpacity>
43 + </View>
44 + </View>
45 + </View>
46 + );
47 + }
48 +}
49 +
50 +const style = StyleSheet.create({
51 + title: {
52 + fontSize: 20,
53 + justifyContent: "center",
54 + alignItems: "center"
55 + },
56 + lowContainer: {
57 + flex: 1,
58 + flexDirection: "row",
59 + justifyContent: "center",
60 + alignItems: "center",
61 + marginLeft: 10,
62 + marginTop: 10,
63 + marginBottom: 20
64 + },
65 + leftContainer: {
66 + flex: 1,
67 + justifyContent: "center",
68 + alignItems: "center"
69 + },
70 + rightContainer: {
71 + flex: 2
72 + },
73 + rightUpContainer: {
74 + flex: 1,
75 + paddingTop: 15,
76 + justifyContent: "center",
77 + marginLeft: 20
78 + },
79 + rightDownContainer: {
80 + flex: 3,
81 + paddingTop: 20,
82 + paddingBottom: 10,
83 + padding: 15
84 + },
85 + poster: {
86 + resizeMode: "cover",
87 + flex: 10,
88 + width: "40%",
89 + height: 40,
90 + paddingHorizontal: 58,
91 + alignItems: "stretch",
92 + borderRadius: 7
93 + },
94 + name: {
95 + fontSize: 16,
96 + color: "white"
97 + },
98 + overview: {
99 + fontSize: 14,
100 + color: "white"
101 + }
102 +});
...@@ -11,10 +11,11 @@ import { ...@@ -11,10 +11,11 @@ import {
11 } from "react-native"; 11 } from "react-native";
12 import { Card, CardItem, Icon } from "native-base"; 12 import { Card, CardItem, Icon } from "native-base";
13 import axios from "axios"; 13 import axios from "axios";
14 +import * as API from "../../API_Key.js";
14 15
15 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 16 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
16 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 17 +const NAVER_CLIENT_ID = API.getNAVER_CLIENT_ID();
17 -const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 18 +const NAVER_CLIENT_SECRET = API.getNAVER_CLIENT_SECRET();
18 19
19 export default class Search extends Component { 20 export default class Search extends Component {
20 static navigationOptions = { 21 static navigationOptions = {
...@@ -61,6 +62,23 @@ export default class Search extends Component { ...@@ -61,6 +62,23 @@ export default class Search extends Component {
61 this.getDB(typing); 62 this.getDB(typing);
62 }; 63 };
63 64
65 + _onPressButton = async temp => {
66 + axios
67 + .get(
68 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
69 + )
70 + .then(response => {
71 + var data = response.data.results[0];
72 + this.props.navigation.navigate("Detail", {
73 + title: data.title,
74 + overview: data.overview + "\n\n\n",
75 + release_date: data.release_date,
76 + url: data.poster_path,
77 + back: data.backdrop_path
78 + });
79 + });
80 + };
81 +
64 render() { 82 render() {
65 console.log("1"); 83 console.log("1");
66 return ( 84 return (
...@@ -94,9 +112,7 @@ export default class Search extends Component { ...@@ -94,9 +112,7 @@ export default class Search extends Component {
94 { 112 {
95 <TouchableOpacity 113 <TouchableOpacity
96 onPress={() => 114 onPress={() =>
97 - this.props.navigation.navigate("Detail", { 115 + this._onPressButton(result.title)
98 - title: result.title
99 - })
100 } 116 }
101 > 117 >
102 <Image 118 <Image
...@@ -111,15 +127,28 @@ export default class Search extends Component { ...@@ -111,15 +127,28 @@ export default class Search extends Component {
111 </View> 127 </View>
112 <View style={styles.rightContainer}> 128 <View style={styles.rightContainer}>
113 <View style={styles.rightUpContainer}> 129 <View style={styles.rightUpContainer}>
130 + <TouchableOpacity
131 + onPress={() => this._onPressButton(result.title)}
132 + >
114 <Text style={styles.name}>{result.title}</Text> 133 <Text style={styles.name}>{result.title}</Text>
134 + </TouchableOpacity>
115 </View> 135 </View>
116 <View style={styles.rightDownContainer}> 136 <View style={styles.rightDownContainer}>
117 <CardItem style={styles.container}> 137 <CardItem style={styles.container}>
138 + <TouchableOpacity
139 + onPress={() =>
140 + this._onPressButton(result.title)
141 + }
142 + >
118 <Text style={styles.overview}> 143 <Text style={styles.overview}>
119 {result.overview.length < 60 144 {result.overview.length < 60
120 ? `${result.overview}` 145 ? `${result.overview}`
121 - : `${result.overview.substring(0, 57)}...\n`} 146 + : `${result.overview.substring(
147 + 0,
148 + 57
149 + )}...\n`}
122 </Text> 150 </Text>
151 + </TouchableOpacity>
123 </CardItem> 152 </CardItem>
124 </View> 153 </View>
125 </View> 154 </View>
......
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, Button } from "react-native";
3 import { Icon } from "native-base"; 3 import { Icon } from "native-base";
4 -import { withNavigation } from 'react-navigation'; 4 +import "react-native-gesture-handler";
5 -import { navigation, StackActions, NavigationActions } from 'react-navigation';
6 -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,13 +14,15 @@ export default class SeenMovieTab extends Component { ...@@ -17,13 +14,15 @@ 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')} /> 17 + <Button
18 + title="hi"
19 + onPress={() => this.props.navigation.navigate("Detail")}
20 + />
21 </View> 21 </View>
22 ); 22 );
23 } 23 }
24 } 24 }
25 25
26 -
27 const style = StyleSheet.create({ 26 const style = StyleSheet.create({
28 container: { 27 container: {
29 backgroundColor: "black", 28 backgroundColor: "black",
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 import { 2 import {
3 StyleSheet, 3 StyleSheet,
4 - Text,
5 View, 4 View,
6 - TouchableOpacity,
7 AsyncStorage, 5 AsyncStorage,
8 SafeAreaView, 6 SafeAreaView,
9 ScrollView, 7 ScrollView,
10 - RefreshControl, 8 + FlatList
11 - Alert,
12 - Image
13 } from "react-native"; 9 } from "react-native";
14 -import { Card, CardItem, Icon } from "native-base"; 10 +import { Icon } from "native-base";
15 import axios from "axios"; 11 import axios from "axios";
16 -import MovieRankingTab from "./MovieRankingTab"; 12 +
17 -import { symbol } from "prop-types"; 13 +import MyList from "./MyList";
18 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 14 +import * as API from "../../API_Key.js";
19 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 15 +
20 -const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 16 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
21 17
22 export default class App extends Component { 18 export default class App extends Component {
19 + static defaultProps = {
20 + title: []
21 + };
22 +
23 + constructor(props) {
24 + super(props);
25 + }
26 +
23 state = { 27 state = {
24 list: [], //영화 제목 list 28 list: [], //영화 제목 list
25 - date: "", //날짜
26 - names: [], // api로 받아오 영화 제목
27 - imgurls: [], //이미지
28 - name0: [], //제목
29 results: [], // json 오브젝트 29 results: [], // json 오브젝트
30 - title: "" 30 + addDate: [],
31 + flag: true
31 }; 32 };
32 33
33 //네비게이션 바 34 //네비게이션 바
...@@ -37,69 +38,33 @@ export default class App extends Component { ...@@ -37,69 +38,33 @@ export default class App extends Component {
37 ) 38 )
38 }; 39 };
39 40
40 - //Data 설정함수 41 + // 로컬스토리지 초기화
42 + _AllKeys = async () => {
43 + try {
44 + tempKey = await AsyncStorage.getAllKeys();
45 + this.setState({
46 + list: tempKey
47 + });
48 + } catch (error) {}
49 + };
50 +
51 + // 초기 스토리지값 불러오기
41 setData = async () => { 52 setData = async () => {
42 try { 53 try {
43 - //요거 바꿔봤다 54 + await this._AllKeys(); // 로컬스토리지에서 this.state.list로 이름 받아오기
44 - // this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다 55 +
45 - // console.log(this.state.list); //잘 뜨는데?? 56 + var length = this.state.list.length;
46 - // const value = await AsyncStorage.getItem("@movieName:key"); 57 + for (let i = 0; i < length; i++) {
47 - // if (value !== null) {
48 - // We have data!!
49 - // await AsyncStorage.getAllKeys().then(console.log);
50 - this.state.list = await AsyncStorage.getAllKeys();
51 - // this.setState({
52 - // name0: this.state.list[0].name
53 - // });
54 - // console.log("확인용", this.state.list);
55 - // var cnt = this.state.list.length;
56 - // console.log(cnt);
57 - // var temp1 = [];
58 - // var temp2 = [];
59 - for (var i = 0; i < this.state.list.length; i++) {
60 axios 58 axios
61 .get( 59 .get(
62 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1` 60 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${this.state.list[i]}&language=ko-KR&page=1`
63 ) 61 )
64 .then(response => { 62 .then(response => {
65 - var joined = this.state.imgurls.concat(
66 - response.data.results[0].poster_path
67 - );
68 - // var joined = response.data.results[0].poster_path;
69 - // var name = response.data.results[0].title;
70 - // var name = this.state.list.concat(response.data.results[0].title);
71 - // temp1.push(joined);
72 - // temp2.push(name);
73 - // var temp = this.state.list.concat(response.data.results[0].title);
74 var result = this.state.results.concat(response.data.results[0]); 63 var result = this.state.results.concat(response.data.results[0]);
75 -
76 - // var temp = [joined, name];
77 - // var tempObj = this.state.results.concat(temp);
78 - // this.setState({ imgurls: joined, names: name, results: tempObj });
79 this.setState({ 64 this.setState({
80 - imgurls: joined,
81 results: result 65 results: result
82 - // results: [this.state.list, imgurls]
83 }); 66 });
84 - console.log("list", this.state.list);
85 - console.log("imgurls", this.state.imgurls);
86 - // console.log("results", this.state.imgurls);
87 - // var temp = [];
88 - // console.log(newobj);
89 - // console.log(joined);
90 - // console.log(response.data.results[0].title);
91 - // console.log(response.data.results[0].poster_path);
92 - // console.log(response.data.results);
93 }); 67 });
94 - // var newobj = [temp1, temp2];
95 - // this.setState({ results: newobj });
96 - // console.log(newobj);
97 -
98 - // var a = [1, 3, 4];
99 - // var b = [3, 4, 5];
100 - // var newobj = [a, b];
101 - // var newobj = [...this.state.imgurls, ...this.state.names];
102 - // console.log(newobj);
103 } 68 }
104 } catch (error) { 69 } catch (error) {
105 alert(error); 70 alert(error);
...@@ -108,51 +73,78 @@ export default class App extends Component { ...@@ -108,51 +73,78 @@ export default class App extends Component {
108 73
109 componentDidMount() { 74 componentDidMount() {
110 this.setData(); 75 this.setData();
111 - // var cnt = this.state.list.length; 76 + }
112 - // console.log(cnt); 77 +
113 - // this.getDB(); 78 + // 해당 영화에 detail로 이동
79 + _onPressButton = async temp => {
80 + axios
81 + .get(
82 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
83 + )
84 + .then(response => {
85 + var data = response.data.results[0];
86 + this.props.navigation.navigate("Detail", {
87 + title: data.title,
88 + overview: data.overview + "\n\n\n",
89 + release_date: data.release_date,
90 + url: data.poster_path,
91 + back: data.backdrop_path
92 + });
93 + });
94 + };
95 +
96 + // props를 받아온 후 (새로운 데이터 추가된 후) 부터는 초기화면으로 안 감
97 + componentWillReceiveProps() {
98 + this.setState({
99 + flag: false
100 + });
114 } 101 }
115 102
116 render() { 103 render() {
104 + //AsyncStorage.clear();
105 +
106 + const { navigation } = this.props;
107 + var addlist = navigation.getParam("keys", ""); // 새로 넘겨 받은 리스트
108 +
109 + const { flag } = this.state;
117 return ( 110 return (
118 <View style={styles.container}> 111 <View style={styles.container}>
119 - {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */} 112 + <SafeAreaView>
120 - <SafeAreaView style={styles.container}> 113 + <ScrollView>
121 - <ScrollView style={styles.container}> 114 + <View>
122 - <View style={styles.container}> 115 + {flag === true ? (
123 - {/* <Card> */} 116 + <FlatList
124 - {this.state.results.map(item => ( 117 + data={this.state.results}
125 - <View style={styles.lowContainer}> 118 + renderItem={({ item }) => {
126 - <View style={styles.leftContainer}> 119 + return (
127 - <CardItem style={styles.container}> 120 + <MyList
128 - { 121 + name={item.title}
129 - <TouchableOpacity 122 + backdrop_path={item.backdrop_path}
130 - onPress={() => 123 + _onPress={this._onPressButton.bind(
131 - this.props.navigation.navigate("Detail", { 124 + this,
132 - title: item.title 125 + `${item.title}`
133 - }) 126 + )}
134 - } 127 + />
135 - > 128 + );
136 - <Image
137 - style={styles.poster}
138 - source={{
139 - uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
140 }} 129 }}
141 /> 130 />
142 - </TouchableOpacity> 131 + ) : (
143 - } 132 + <FlatList
144 - </CardItem> 133 + data={addlist}
145 - </View> 134 + renderItem={({ item }) => {
146 - <View style={styles.rightContainer}> 135 + return (
147 - <CardItem style={styles.container}> 136 + <MyList
148 - <View style={styles.container}> 137 + name={item.title}
149 - <Text style={styles.textStyle}>{item.title}</Text> 138 + backdrop_path={item.backdrop_path}
150 - </View> 139 + _onPress={this._onPressButton.bind(
151 - </CardItem> 140 + this,
152 - </View> 141 + `${item.title}`
153 - </View> 142 + )}
154 - ))} 143 + />
155 - {/* </Card> */} 144 + );
145 + }}
146 + />
147 + )}
156 </View> 148 </View>
157 </ScrollView> 149 </ScrollView>
158 </SafeAreaView> 150 </SafeAreaView>
...@@ -165,54 +157,5 @@ const styles = StyleSheet.create({ ...@@ -165,54 +157,5 @@ const styles = StyleSheet.create({
165 container: { 157 container: {
166 backgroundColor: "black", 158 backgroundColor: "black",
167 flex: 1 159 flex: 1
168 - // alignItems: "center",
169 - // justifyContent: "center"
170 - },
171 - lowContainer: {
172 - marginLeft: 15,
173 - backgroundColor: "black",
174 - flex: 1,
175 - flexDirection: "row",
176 - justifyContent: "center",
177 - alignItems: "center"
178 - },
179 - leftContainer: {
180 - flex: 1,
181 - backgroundColor: "black",
182 - justifyContent: "center",
183 - alignItems: "center"
184 - },
185 - rightContainer: {
186 - flex: 2,
187 - backgroundColor: "black"
188 - },
189 - rightUpContainer: {
190 - flex: 1,
191 - backgroundColor: "black",
192 - paddingTop: 35,
193 - justifyContent: "center",
194 - marginLeft: 20
195 - },
196 - rightDownContainer: {
197 - flex: 3,
198 - backgroundColor: "black",
199 - paddingBottom: 10
200 - },
201 - poster: {
202 - resizeMode: "cover",
203 - flex: 10,
204 - width: "40%",
205 - height: 80,
206 - paddingHorizontal: 58,
207 - alignItems: "stretch",
208 - borderRadius: 7
209 - },
210 - textStyle: {
211 - fontSize: 16,
212 - color: "white"
213 - },
214 - overview: {
215 - fontSize: 14,
216 - color: "white"
217 } 160 }
218 }); 161 });
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 -import { StyleSheet, Text, View, Button } from "react-native"; 2 +import { StyleSheet } 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 MovieRankingTab from "./AppTabNavigator/MovieRankingTab";
7 -import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; 6 +import WantToWatchTab from "./AppTabNavigator/WantToWatchTab";
8 -import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
9 import Search from ".//AppTabNavigator/Search"; 7 import Search from ".//AppTabNavigator/Search";
10 import Detail from "./AppTabNavigator/Detail"; 8 import Detail from "./AppTabNavigator/Detail";
11 import { Platform } from "react-native"; 9 import { Platform } from "react-native";
12 -import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
13 10
14 const AppTabNavigator = createMaterialTopTabNavigator( 11 const AppTabNavigator = createMaterialTopTabNavigator(
15 { 12 {
16 - SeenMovieTab: { screen: SeenMovieTab },
17 MovieRankingTab: { screen: MovieRankingTab }, 13 MovieRankingTab: { screen: MovieRankingTab },
18 WantToWatchTab: { screen: WantToWatchTab }, 14 WantToWatchTab: { screen: WantToWatchTab },
15 + //SeenMovieTab: { screen: SeenMovieTab },
19 Search: { screen: Search }, 16 Search: { screen: Search },
20 Detail: { screen: Detail } 17 Detail: { screen: Detail }
21 }, 18 },
...@@ -48,7 +45,7 @@ export default class MainScreen extends Component { ...@@ -48,7 +45,7 @@ export default class MainScreen extends Component {
48 // navigationOptions 코드 추가 45 // navigationOptions 코드 추가
49 static navigationOptions = { 46 static navigationOptions = {
50 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 47 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
51 - title: " Poket Movie", 48 + title: " Pocket Movie",
52 headerStyle: { 49 headerStyle: {
53 backgroundColor: "black" 50 backgroundColor: "black"
54 }, 51 },
......
1 -import React from "react";
2 -import { StyleSheet, Text, View, StatusBar } from "react-native";
3 -
4 -export default function Loading() {
5 - return (
6 - <View style={styles.container}>
7 - <StatusBar barStyle="dark-content" />
8 - <Text style={styles.text}>Getting the current weather</Text>
9 - </View>
10 - );
11 -}
12 -
13 -const styles = StyleSheet.create({
14 - container: {
15 - flex: 1,
16 - justifyContent: "flex-end",
17 - paddingHorizontal: 30,
18 - paddingVertical: 100,
19 - backgroundColor: "#FDF6AA"
20 - },
21 - text: {
22 - color: "#2c2c2c",
23 - fontSize: 30
24 - }
25 -});
...@@ -18,7 +18,12 @@ ...@@ -18,7 +18,12 @@
18 }, 18 },
19 "assetBundlePatterns": ["**/*"], 19 "assetBundlePatterns": ["**/*"],
20 "ios": { 20 "ios": {
21 + "bundleIdentifier": "com.hj.pocketMovie",
21 "supportsTablet": true 22 "supportsTablet": true
22 - } 23 + },
24 + "android": {
25 + "package": "com.hj.pocketMovie"
26 + },
27 + "description": ""
23 } 28 }
24 } 29 }
......

7.01 KB | W: | H:

15.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", 22 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
23 "react-native-axios": "^0.17.1", 23 "react-native-axios": "^0.17.1",
24 "react-native-elements": "^1.2.7", 24 "react-native-elements": "^1.2.7",
25 - "react-native-gesture-handler": "^1.5.2", 25 + "react-native-gesture-handler": "~1.3.0",
26 "react-native-reanimated": "~1.2.0", 26 "react-native-reanimated": "~1.2.0",
27 "react-native-screens": "~1.0.0-alpha.23", 27 "react-native-screens": "~1.0.0-alpha.23",
28 "react-native-stack": "^1.0.0-alpha11", 28 "react-native-stack": "^1.0.0-alpha11",
...@@ -36,5 +36,5 @@ ...@@ -36,5 +36,5 @@
36 "babel-preset-expo": "^7.1.0" 36 "babel-preset-expo": "^7.1.0"
37 }, 37 },
38 "private": true, 38 "private": true,
39 - "version": "0.0.0" 39 + "version": "1.0.0"
40 } 40 }
......
No preview for this file type
...@@ -2726,11 +2726,6 @@ growly@^1.3.0: ...@@ -2726,11 +2726,6 @@ growly@^1.3.0:
2726 resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" 2726 resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
2727 integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE= 2727 integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
2728 2728
2729 -hammerjs@^2.0.8:
2730 - version "2.0.8"
2731 - resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
2732 - integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
2733 -
2734 har-schema@^2.0.0: 2729 har-schema@^2.0.0:
2735 version "2.0.0" 2730 version "2.0.0"
2736 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" 2731 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
...@@ -4716,15 +4711,14 @@ react-native-elements@^1.2.7: ...@@ -4716,15 +4711,14 @@ react-native-elements@^1.2.7:
4716 react-native-ratings "^6.3.0" 4711 react-native-ratings "^6.3.0"
4717 react-native-status-bar-height "^2.2.0" 4712 react-native-status-bar-height "^2.2.0"
4718 4713
4719 -react-native-gesture-handler@^1.5.2: 4714 +react-native-gesture-handler@~1.3.0:
4720 - version "1.5.2" 4715 + version "1.3.0"
4721 - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz#281111550bf1eee10b7feba5278d142169892731" 4716 + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
4722 - integrity sha512-Xp03dq4XYVTD0xmWx4DW4eX+ox1NQLjHmbykspTdS5FCNIVIOekVXRLFCw1698/v8dYUHApNo6K3s3BCD8fqPA== 4717 + integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
4723 dependencies: 4718 dependencies:
4724 - hammerjs "^2.0.8"
4725 hoist-non-react-statics "^2.3.1" 4719 hoist-non-react-statics "^2.3.1"
4726 - invariant "^2.2.4" 4720 + invariant "^2.2.2"
4727 - prop-types "^15.7.2" 4721 + prop-types "^15.5.10"
4728 4722
4729 react-native-iphone-x-helper@^1.0.3: 4723 react-native-iphone-x-helper@^1.0.3:
4730 version "1.2.1" 4724 version "1.2.1"
......
1 -메인 화면에서는
2 -영화진흥위원회에서 제공하는 Open API를 통해 어제 날짜 기준으로 영화 순위를 1위부터 10위까지 받아왔고,
3 -해당 API가 따로 포스터 이미지를 제공하지 않아 더 무비라는 해외 사이트에서 포스터와 줄거리를 가져왔습니다.
4 -
5 -각 영화 리스트를 클릭하면 영화의 상세 페이지로 넘어가 자세한 정보를 볼 수 있고, 옆에 보시는 즐겨찾기 버튼을 통해 나중에 볼 영화 목록를 등록할 수 있습니다.
6 -
7 -My movie탭을 누르면 영화가 추가 된것을 볼 수 있습니다.
8 -
9 -밑에 검색탭을 보시면 영화 이름 검색시 해당 단어가 들어간 영화의 정보를 받아 오는 것을 볼 수 있습니다,
10 -
11 -이상으로 발표 마치겠습니다.
...\ No newline at end of file ...\ No newline at end of file