신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
korkeep
ab2dcb58 1 parent 777b4939

Movie Title Pops up

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