신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
5f449598 1 parent 37be0be4

merge search and movieranking

Inline Side-by-side
Showing 1 changed file with 108 additions and 25 deletions
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 -import { View, Text, StyleSheet, Image } from "react-native"; 2 +import {
3 + View,
4 + Text,
5 + StyleSheet,
6 + Image,
7 + SafeAreaView,
8 + ScrollView,
9 + Alert,
10 + TouchableOpacity,
11 + TouchableHighlight,
12 + TouchableWithoutFeedback
13 +} from "react-native";
3 import { Icon } from "native-base"; 14 import { Icon } from "native-base";
4 import { AsyncStorage } from "react-native"; 15 import { AsyncStorage } from "react-native";
5 import axios from "axios"; 16 import axios from "axios";
6 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 17 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
7 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 18 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
8 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 19 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
9 -let uri1 = "";
10 20
11 export default class MovieRankingTab extends Component { 21 export default class MovieRankingTab extends Component {
12 state = { 22 state = {
13 isLoading: true, 23 isLoading: true,
14 info: [], 24 info: [],
25 + date: "",
15 name0: [], 26 name0: [],
16 name1: [], 27 name1: [],
17 name2: [], 28 name2: [],
...@@ -39,10 +50,10 @@ export default class MovieRankingTab extends Component { ...@@ -39,10 +50,10 @@ export default class MovieRankingTab extends Component {
39 ) 50 )
40 }; 51 };
41 52
42 - getMovieList = async () => { 53 + getMovieList = async date => {
43 axios 54 axios
44 .get( 55 .get(
45 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129` 56 + `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
46 ) 57 )
47 .then( 58 .then(
48 response => { 59 response => {
...@@ -234,78 +245,150 @@ export default class MovieRankingTab extends Component { ...@@ -234,78 +245,150 @@ export default class MovieRankingTab extends Component {
234 }); 245 });
235 }; 246 };
236 componentDidMount() { 247 componentDidMount() {
237 - this.getMovieList(); 248 + var day = new Date().getDate() - 1; // 어제 날짜
249 + if (day == 1) {
250 + day = 30;
251 + } else if (day < 10) {
252 + day = "0" + day;
238 } 253 }
254 + var month = new Date().getMonth() + 1; //Current Month
255 + var year = new Date().getFullYear(); //Current Year
256 + var date = year + "" + month + day;
257 + this.getMovieList(date);
258 + }
259 +
260 + _onPressButton = () => {
261 + Alert.alert("image pressed the car");
262 + };
239 render() { 263 render() {
240 return ( 264 return (
241 - <View style={style.container}> 265 + <SafeAreaView style={style.container}>
242 - <Text>MovieRanking</Text> 266 + <ScrollView style={style.scrollView}>
267 + <Text style={style.title}>MovieRanking</Text>
268 + <View style={style.lowContainer}>
269 + <TouchableOpacity onPress={this._onPressButton}>
270 + <View>
243 <Image 271 <Image
244 - style={{ height: "25%", width: "25%" }} 272 + style={style.poster}
245 source={{ uri: `${this.state.imgurl0}` }} 273 source={{ uri: `${this.state.imgurl0}` }}
246 /> 274 />
247 <Text>{this.state.name0}</Text> 275 <Text>{this.state.name0}</Text>
276 + </View>
277 + </TouchableOpacity>
278 + <TouchableOpacity
279 + style={style.button}
280 + onPress={this._onPressButton}
281 + >
282 + <View>
248 <Image 283 <Image
249 - style={{ height: "25%", width: "25%" }} 284 + style={style.poster}
250 source={{ uri: `${this.state.imgurl1}` }} 285 source={{ uri: `${this.state.imgurl1}` }}
251 /> 286 />
252 <Text>{this.state.name1}</Text> 287 <Text>{this.state.name1}</Text>
288 + </View>
289 + </TouchableOpacity>
290 + </View>
291 + <View style={style.lowContainer}>
292 + <View style={style.halfContainer}>
253 <Image 293 <Image
254 - style={{ height: "25%", width: "25%" }} 294 + style={style.poster}
255 source={{ uri: `${this.state.imgurl2}` }} 295 source={{ uri: `${this.state.imgurl2}` }}
256 /> 296 />
257 <Text>{this.state.name2}</Text> 297 <Text>{this.state.name2}</Text>
298 + </View>
299 + <View style={style.halfContainer}>
258 <Image 300 <Image
259 - style={{ height: "25%", width: "25%" }} 301 + style={style.poster}
260 source={{ uri: `${this.state.imgurl3}` }} 302 source={{ uri: `${this.state.imgurl3}` }}
261 /> 303 />
262 <Text>{this.state.name3}</Text> 304 <Text>{this.state.name3}</Text>
305 + </View>
306 + </View>
307 + <View style={style.lowContainer}>
308 + <View style={style.halfContainer}>
263 <Image 309 <Image
264 - style={{ height: "25%", width: "25%" }} 310 + style={style.poster}
265 source={{ uri: `${this.state.imgurl4}` }} 311 source={{ uri: `${this.state.imgurl4}` }}
266 /> 312 />
267 <Text>{this.state.name4}</Text> 313 <Text>{this.state.name4}</Text>
314 + </View>
315 + <View style={style.halfContainer}>
268 <Image 316 <Image
269 - style={{ height: "25%", width: "25%" }} 317 + style={style.poster}
270 source={{ uri: `${this.state.imgurl5}` }} 318 source={{ uri: `${this.state.imgurl5}` }}
271 /> 319 />
272 <Text>{this.state.name5}</Text> 320 <Text>{this.state.name5}</Text>
321 + </View>
322 + </View>
323 + <View style={style.lowContainer}>
324 + <View style={style.halfContainer}>
273 <Image 325 <Image
274 - style={{ height: "25%", width: "25%" }} 326 + style={style.poster}
275 source={{ uri: `${this.state.imgurl6}` }} 327 source={{ uri: `${this.state.imgurl6}` }}
276 /> 328 />
277 <Text>{this.state.name6}</Text> 329 <Text>{this.state.name6}</Text>
330 + </View>
331 + <View style={style.halfContainer}>
278 <Image 332 <Image
279 - style={{ height: "25%", width: "25%" }} 333 + style={style.poster}
280 source={{ uri: `${this.state.imgurl7}` }} 334 source={{ uri: `${this.state.imgurl7}` }}
281 /> 335 />
282 <Text>{this.state.name7}</Text> 336 <Text>{this.state.name7}</Text>
337 + </View>
338 + </View>
339 + <View style={style.lowContainer}>
340 + <View style={style.halfContainer}>
283 <Image 341 <Image
284 - style={{ height: "25%", width: "25%" }} 342 + style={style.poster}
285 source={{ uri: `${this.state.imgurl8}` }} 343 source={{ uri: `${this.state.imgurl8}` }}
286 /> 344 />
287 <Text>{this.state.name8}</Text> 345 <Text>{this.state.name8}</Text>
346 + </View>
347 + <View style={style.halfContainer}>
288 <Image 348 <Image
289 - style={{ height: "25%", width: "25%" }} 349 + style={style.poster}
290 - source={{ uri: `${this.state.imgurl9}` }}
291 - />
292 - <Image
293 - style={{ height: "25%", width: "25%" }}
294 source={{ uri: `${this.state.imgurl9}` }} 350 source={{ uri: `${this.state.imgurl9}` }}
295 /> 351 />
296 <Text>{this.state.name9}</Text> 352 <Text>{this.state.name9}</Text>
297 </View> 353 </View>
354 + </View>
355 + </ScrollView>
356 + </SafeAreaView>
298 ); 357 );
299 } 358 }
300 } 359 }
301 360
302 const style = StyleSheet.create({ 361 const style = StyleSheet.create({
303 container: { 362 container: {
363 + flex: 1
364 + },
365 + scrollView: {
366 + // backgroundColor: "black",
367 + // justifyContent: "center",
368 + // alignItems: "center"
369 + },
370 + title: {
371 + fontSize: 20,
372 + justifyContent: "center",
373 + alignItems: "center"
374 + },
375 + lowContainer: {
304 flex: 1, 376 flex: 1,
305 - alignItems: "center", 377 + flexDirection: "row",
306 - justifyContent: "center" 378 + justifyContent: "center",
379 + alignItems: "center"
307 }, 380 },
308 - splitContainer: { 381 + poster: {
309 - flex: 1 382 + // resizeMode: "cover",
383 + flex: 10,
384 + width: "90%",
385 + height: 200,
386 + paddingHorizontal: 50
387 + // alignItems: "stretch"
388 + },
389 + halfContainer: {
390 + flex: 1,
391 + // justifyContent: "center",
392 + alignItems: "center"
310 } 393 }
311 }); 394 });
......