신승민 / 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 150 additions and 67 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;
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);
238 } 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}>
243 - <Image 267 + <Text style={style.title}>MovieRanking</Text>
244 - style={{ height: "25%", width: "25%" }} 268 + <View style={style.lowContainer}>
245 - source={{ uri: `${this.state.imgurl0}` }} 269 + <TouchableOpacity onPress={this._onPressButton}>
246 - /> 270 + <View>
247 - <Text>{this.state.name0}</Text> 271 + <Image
248 - <Image 272 + style={style.poster}
249 - style={{ height: "25%", width: "25%" }} 273 + source={{ uri: `${this.state.imgurl0}` }}
250 - source={{ uri: `${this.state.imgurl1}` }} 274 + />
251 - /> 275 + <Text>{this.state.name0}</Text>
252 - <Text>{this.state.name1}</Text> 276 + </View>
253 - <Image 277 + </TouchableOpacity>
254 - style={{ height: "25%", width: "25%" }} 278 + <TouchableOpacity
255 - source={{ uri: `${this.state.imgurl2}` }} 279 + style={style.button}
256 - /> 280 + onPress={this._onPressButton}
257 - <Text>{this.state.name2}</Text> 281 + >
258 - <Image 282 + <View>
259 - style={{ height: "25%", width: "25%" }} 283 + <Image
260 - source={{ uri: `${this.state.imgurl3}` }} 284 + style={style.poster}
261 - /> 285 + source={{ uri: `${this.state.imgurl1}` }}
262 - <Text>{this.state.name3}</Text> 286 + />
263 - <Image 287 + <Text>{this.state.name1}</Text>
264 - style={{ height: "25%", width: "25%" }} 288 + </View>
265 - source={{ uri: `${this.state.imgurl4}` }} 289 + </TouchableOpacity>
266 - /> 290 + </View>
267 - <Text>{this.state.name4}</Text> 291 + <View style={style.lowContainer}>
268 - <Image 292 + <View style={style.halfContainer}>
269 - style={{ height: "25%", width: "25%" }} 293 + <Image
270 - source={{ uri: `${this.state.imgurl5}` }} 294 + style={style.poster}
271 - /> 295 + source={{ uri: `${this.state.imgurl2}` }}
272 - <Text>{this.state.name5}</Text> 296 + />
273 - <Image 297 + <Text>{this.state.name2}</Text>
274 - style={{ height: "25%", width: "25%" }} 298 + </View>
275 - source={{ uri: `${this.state.imgurl6}` }} 299 + <View style={style.halfContainer}>
276 - /> 300 + <Image
277 - <Text>{this.state.name6}</Text> 301 + style={style.poster}
278 - <Image 302 + source={{ uri: `${this.state.imgurl3}` }}
279 - style={{ height: "25%", width: "25%" }} 303 + />
280 - source={{ uri: `${this.state.imgurl7}` }} 304 + <Text>{this.state.name3}</Text>
281 - /> 305 + </View>
282 - <Text>{this.state.name7}</Text> 306 + </View>
283 - <Image 307 + <View style={style.lowContainer}>
284 - style={{ height: "25%", width: "25%" }} 308 + <View style={style.halfContainer}>
285 - source={{ uri: `${this.state.imgurl8}` }} 309 + <Image
286 - /> 310 + style={style.poster}
287 - <Text>{this.state.name8}</Text> 311 + source={{ uri: `${this.state.imgurl4}` }}
288 - <Image 312 + />
289 - style={{ height: "25%", width: "25%" }} 313 + <Text>{this.state.name4}</Text>
290 - source={{ uri: `${this.state.imgurl9}` }} 314 + </View>
291 - /> 315 + <View style={style.halfContainer}>
292 - <Image 316 + <Image
293 - style={{ height: "25%", width: "25%" }} 317 + style={style.poster}
294 - source={{ uri: `${this.state.imgurl9}` }} 318 + source={{ uri: `${this.state.imgurl5}` }}
295 - /> 319 + />
296 - <Text>{this.state.name9}</Text> 320 + <Text>{this.state.name5}</Text>
297 - </View> 321 + </View>
322 + </View>
323 + <View style={style.lowContainer}>
324 + <View style={style.halfContainer}>
325 + <Image
326 + style={style.poster}
327 + source={{ uri: `${this.state.imgurl6}` }}
328 + />
329 + <Text>{this.state.name6}</Text>
330 + </View>
331 + <View style={style.halfContainer}>
332 + <Image
333 + style={style.poster}
334 + source={{ uri: `${this.state.imgurl7}` }}
335 + />
336 + <Text>{this.state.name7}</Text>
337 + </View>
338 + </View>
339 + <View style={style.lowContainer}>
340 + <View style={style.halfContainer}>
341 + <Image
342 + style={style.poster}
343 + source={{ uri: `${this.state.imgurl8}` }}
344 + />
345 + <Text>{this.state.name8}</Text>
346 + </View>
347 + <View style={style.halfContainer}>
348 + <Image
349 + style={style.poster}
350 + source={{ uri: `${this.state.imgurl9}` }}
351 + />
352 + <Text>{this.state.name9}</Text>
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 -});
...\ No newline at end of file ...\ No newline at end of file
394 +});
......