신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
ca4aaf43 1 parent 89606a8e

add detail

Expand all
Inline Side-by-side
Showing 4 changed files with 354 additions and 78 deletions
1 +import React, { Component } from "react";
2 +import { View, Text, StyleSheet, Button, Image } from "react-native";
3 +import { Icon } from "native-base";
4 +import {
5 + NavigationActions,
6 + createStackNavigator,
7 + withNavigation
8 +} from "react-navigation";
9 +import axios from "axios";
10 +import { AsyncStorage } from "react-native";
11 +
12 +export default class Detail extends Component {
13 + static navigationOptions = {
14 + tabBarIcon: ({ tintColor }) => (
15 + <Icon name="ios-albums" style={{ color: tintColor }} />
16 + )
17 + };
18 +
19 + state = {
20 + title: "1",
21 + overview: "",
22 + release_date: "",
23 + url: ""
24 + };
25 +
26 + getDB = async search => {
27 + axios
28 + .get(
29 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
30 + )
31 + .then(response => {
32 + this.setState({
33 + title: response.data.results[0].title,
34 + overview: response.data.results[0].overview,
35 + release_date: response.data.results[0].release_date,
36 + url: response.data.results[0].poster_path
37 + });
38 + });
39 + };
40 + getNaverApi = async search => {
41 + fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
42 + headers: {
43 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
44 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
45 + }
46 + })
47 + .then(response => response.json())
48 + .then(json => this.setState({ items: json.items }));
49 + };
50 +
51 + _retrieveData = async item => {
52 + try {
53 + const value = await AsyncStorage.getItem(item);
54 + if (value !== null) {
55 + // We have data!!
56 + console.log(value);
57 + }
58 + } catch (error) {
59 + // Error retrieving data
60 + }
61 + };
62 +
63 + _AllKeys = async () => {
64 + const key = await AsyncStorage.getAllKeys();
65 + console.log(key);
66 + };
67 +
68 + componentDidMount() {
69 + // this._retrieveData("겨울왕국 2");
70 + // this._AllKeys();
71 + // AsyncStorage.removeItem("1");
72 + }
73 +
74 + render() {
75 + const { navigation } = this.props;
76 + var temp = navigation.getParam("title", "");
77 + this.getDB(temp);
78 + return (
79 + <View style={style.container}>
80 + <Text>{this.state.title}</Text>
81 + <Text>{this.state.release_date}</Text>
82 + <Text>{this.state.overview}</Text>
83 + <Text>{this.state.url}</Text>
84 + <Image
85 + source={{
86 + uri: `https://image.tmdb.org/t/p/original${this.state.url}`
87 + }}
88 + style={styles.poster}
89 + />
90 + <Button
91 + title="추가 "
92 + onPress={() =>
93 + AsyncStorage.setItem(this.state.title, this.state.title)
94 + }
95 + />
96 + </View>
97 + );
98 + }
99 +}
100 +const style = StyleSheet.create({
101 + container: {
102 + flex: 1,
103 + alignItems: "center",
104 + justifyContent: "center"
105 + }
106 +});
107 +
108 +//export default withNavigation(Detail);
109 +
110 +const styles = StyleSheet.create({
111 + container: {
112 + flex: 1,
113 + backgroundColor: "black"
114 + },
115 + searchContainer: {
116 + backgroundColor: "black",
117 + marginLeft: 40,
118 + marginRight: 40
119 + },
120 + input: {
121 + borderRadius: 10,
122 + backgroundColor: "#FFF",
123 + paddingLeft: 10,
124 + paddingRight: 10,
125 + height: 50,
126 + alignItems: "center",
127 + flexDirection: "row",
128 + justifyContent: "space-between",
129 + borderBottomColor: "#bbb",
130 + borderBottomWidth: StyleSheet.hairlineWidth
131 + },
132 + inputText: {
133 + flex: 1
134 + },
135 + addBtn: {
136 + color: "#4169E1"
137 + },
138 + imagecontainer: {
139 + flex: 1
140 + },
141 + lowContainer: {
142 + backgroundColor: "black",
143 + flex: 1,
144 + flexDirection: "row",
145 + justifyContent: "center",
146 + alignItems: "center"
147 + },
148 + leftContainer: {
149 + flex: 1,
150 + backgroundColor: "black",
151 + justifyContent: "center",
152 + alignItems: "center"
153 + },
154 + rightContainer: {
155 + flex: 2,
156 + backgroundColor: "black"
157 + },
158 + rightUpContainer: {
159 + flex: 1,
160 + backgroundColor: "black",
161 + paddingTop: 35,
162 + justifyContent: "center",
163 + marginLeft: 20
164 + },
165 + rightDownContainer: {
166 + flex: 3,
167 + backgroundColor: "black",
168 + paddingBottom: 10
169 + },
170 + poster: {
171 + resizeMode: "cover",
172 + flex: 10,
173 + width: "30%",
174 + height: 160,
175 + marginLeft: 10,
176 + paddingHorizontal: 50,
177 + alignItems: "stretch",
178 + borderRadius: 7
179 + },
180 + name: {
181 + fontSize: 16,
182 + color: "white"
183 + },
184 + overview: {
185 + fontSize: 14,
186 + color: "white"
187 + }
188 +});
This diff is collapsed. Click to expand it.
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 import { 2 import {
3 StyleSheet, 3 StyleSheet,
4 Text, 4 Text,
5 View, 5 View,
6 TouchableOpacity, 6 TouchableOpacity,
7 AsyncStorage, 7 AsyncStorage,
8 + SafeAreaView,
8 ScrollView, 9 ScrollView,
9 - Image, 10 + Alert,
10 -} from 'react-native'; 11 + Image
11 -import { Icon } from "native-base"; 12 +} from "react-native";
13 +import { Card, CardItem, Icon } from "native-base";
12 import axios from "axios"; 14 import axios from "axios";
13 -import MovieRankingTab from './MovieRankingTab'; 15 +import MovieRankingTab from "./MovieRankingTab";
16 +import { symbol } from "prop-types";
14 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 17 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
15 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 18 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
16 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 19 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
17 20
18 -
19 export default class App extends Component { 21 export default class App extends Component {
20 state = { 22 state = {
21 - list: "", //영화 제목 list 23 + list: [], //영화 제목 list
22 date: "", //날짜 24 date: "", //날짜
23 - imgurl0: [], //이미지 25 + names: [], // api로 받아오 영화 제목
26 + imgurls: [], //이미지
24 name0: [], //제목 27 name0: [], //제목
25 - }; 28 + results: [], // json 오브젝트
26 - 29 + title: ""
27 - //날짜 정하기
28 - componentDidMount() {
29 - var day = new Date().getDate() - 1; // 어제 날짜
30 - if (day == 1) {
31 - day = 30;
32 - } else if (day < 10) {
33 - day = "0" + day;
34 - }
35 - var month = new Date().getMonth() + 1; //Current Month
36 - var year = new Date().getFullYear(); //Current Year
37 - var date = year + "" + month + day;
38 - this.getMovieList(date);
39 - this.setData();
40 - }
41 -
42 - getMovieList = async date => {
43 - axios
44 - .get(
45 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
46 - )
47 - .then(
48 - response => {
49 - this.setState({
50 - //영화 제목
51 - name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
52 - });
53 -
54 - temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
55 - fetch(
56 - `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
57 - {
58 - headers: {
59 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
60 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
61 - }
62 - }
63 - )
64 - .then(response => response.json())
65 - .then(json => {
66 - this.setState({
67 - imgurl0: json.items[0].image
68 - });
69 - });
70 - }
71 - )
72 - .catch(error => {
73 - console.log(error);
74 - });
75 }; 30 };
76 31
77 //네비게이션 바 32 //네비게이션 바
78 static navigationOptions = { 33 static navigationOptions = {
79 tabBarIcon: ({ tintColor }) => ( 34 tabBarIcon: ({ tintColor }) => (
80 - <Icon name='ios-star' style={{ color: tintColor }} /> 35 + <Icon name="ios-star" style={{ color: tintColor }} />
81 ) 36 )
82 - } 37 + };
83 38
84 //Data 설정함수 39 //Data 설정함수
85 setData = async () => { 40 setData = async () => {
86 try { 41 try {
87 //요거 바꿔봤다 42 //요거 바꿔봤다
88 - this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다 43 + // this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다
89 - console.log(this.state.list); //잘 뜨는데?? 44 + // console.log(this.state.list); //잘 뜨는데??
90 - } 45 + // const value = await AsyncStorage.getItem("@movieName:key");
91 - catch (error) { 46 + // if (value !== null) {
92 - alert(error) 47 + // We have data!!
48 + // await AsyncStorage.getAllKeys().then(console.log);
49 + this.state.list = await AsyncStorage.getAllKeys();
50 + // this.setState({
51 + // name0: this.state.list[0].name
52 + // });
53 + // console.log("확인용", this.state.list);
54 + // var cnt = this.state.list.length;
55 + // console.log(cnt);
56 + // var temp1 = [];
57 + // var temp2 = [];
58 + for (var i = 0; i < this.state.list.length; i++) {
59 + axios
60 + .get(
61 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
62 + )
63 + .then(response => {
64 + var joined = this.state.imgurls.concat(
65 + response.data.results[0].poster_path
66 + );
67 + // var joined = response.data.results[0].poster_path;
68 + // var name = response.data.results[0].title;
69 + // var name = this.state.list.concat(response.data.results[0].title);
70 + // temp1.push(joined);
71 + // temp2.push(name);
72 + // var temp = this.state.list.concat(response.data.results[0].title);
73 + var result = this.state.results.concat(response.data.results[0]);
74 +
75 + // var temp = [joined, name];
76 + // var tempObj = this.state.results.concat(temp);
77 + // this.setState({ imgurls: joined, names: name, results: tempObj });
78 + this.setState({
79 + imgurls: joined,
80 + results: result
81 + // results: [this.state.list, imgurls]
82 + });
83 + console.log("list", this.state.list);
84 + console.log("imgurls", this.state.imgurls);
85 + // console.log("results", this.state.imgurls);
86 + // var temp = [];
87 + // console.log(newobj);
88 + // console.log(joined);
89 + // console.log(response.data.results[0].title);
90 + // console.log(response.data.results[0].poster_path);
91 + // console.log(response.data.results);
92 + });
93 + // var newobj = [temp1, temp2];
94 + // this.setState({ results: newobj });
95 + // console.log(newobj);
96 +
97 + // var a = [1, 3, 4];
98 + // var b = [3, 4, 5];
99 + // var newobj = [a, b];
100 + // var newobj = [...this.state.imgurls, ...this.state.names];
101 + // console.log(newobj);
93 } 102 }
103 + } catch (error) {
104 + alert(error);
94 } 105 }
106 + };
95 107
108 + componentDidMount() {
109 + this.setData();
110 + // var cnt = this.state.list.length;
111 + // console.log(cnt);
112 + // this.getDB();
113 + }
96 114
97 render() { 115 render() {
98 return ( 116 return (
99 <View style={styles.container}> 117 <View style={styles.container}>
100 - <TouchableOpacity onPress={this.componentDidMount.bind(this)}> 118 + {/* <TouchableOpacity onPress={this.setData.bind(this)}> */}
101 {/* 버튼 누르면 리스트 갱신됩니다 */} 119 {/* 버튼 누르면 리스트 갱신됩니다 */}
102 - <Image source = {require('../../assets/refresh.png')} /> 120 + {/* <Image source={require("../../assets/refresh.png")} /> */}
103 {/* <Text style={styles.textStyle}>Refresh Button</Text> */} 121 {/* <Text style={styles.textStyle}>Refresh Button</Text> */}
104 - </TouchableOpacity> 122 + {/* </TouchableOpacity> */}
105 - <Text style={styles.textStyle}>{this.state.list}</Text> 123 + {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
124 + <SafeAreaView>
125 + <ScrollView>
126 + <Card>
127 + {/* <View>
128 + {this.state.list.map((item, i) => (
129 + <View style={styles.lowContainer}>
130 + <View style={styles.halfContainer}>
131 + <Text style={styles.textStyle} key={i}>
132 + {item}
133 + </Text>
134 + </View>
135 + <View style={styles.halfContainer}>
136 + <Text style={styles.textStyle} key={i}>
137 + {item}
138 + </Text>
139 + </View>
140 + </View>
141 + ))}
142 + </View> */}
143 + {/* {this.state.imgurls.map((val, index) => <Well data={val} desc={this.state.li[index]} key={index}/> */}
144 + {this.state.results.map(item => (
145 + <View style={styles.lowContainer}>
146 + <View>
147 + <CardItem>
148 + {
149 + <Image
150 + style={styles.poster}
151 + source={{
152 + uri: `https://image.tmdb.org/t/p/original/${item.poster_path}`
153 + }}
154 + />
155 + }
156 + </CardItem>
157 + <CardItem>
158 + <View>
159 + <Text style={styles.textStyle}>{item.title}</Text>
160 + </View>
161 + </CardItem>
162 + </View>
163 + </View>
164 + ))}
165 + </Card>
166 + </ScrollView>
167 + </SafeAreaView>
106 </View> 168 </View>
107 ); 169 );
108 } 170 }
...@@ -111,12 +173,38 @@ export default class App extends Component { ...@@ -111,12 +173,38 @@ export default class App extends Component {
111 const styles = StyleSheet.create({ 173 const styles = StyleSheet.create({
112 container: { 174 container: {
113 backgroundColor: "black", 175 backgroundColor: "black",
176 + flex: 1
177 + // alignItems: "center",
178 + // justifyContent: "center"
179 + },
180 + lowContainer: {
181 + flex: 1,
182 + flexDirection: "row",
183 + backgroundColor: "black",
184 + // alignContent: "space-around",
185 + justifyContent: "center",
186 + alignItems: "center"
187 + // marginLeft: 10,
188 + // marginTop: 10,
189 + // marginBottom: 20
190 + },
191 + halfContainer: {
114 flex: 1, 192 flex: 1,
115 - alignItems: "center", 193 + backgroundColor: "yellow",
116 - justifyContent: "center" 194 + justifyContent: "center",
195 + alignItems: "center"
196 + },
197 + poster: {
198 + // resizeMode: "cover",
199 + flex: 10,
200 + width: "40%",
201 + height: 120,
202 + paddingHorizontal: 58,
203 + alignItems: "stretch",
204 + borderRadius: 7
117 }, 205 },
118 textStyle: { 206 textStyle: {
119 fontSize: 25, 207 fontSize: 25,
120 - color: "white", 208 + color: "white"
121 -}, 209 + }
122 }); 210 });
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 import { StyleSheet, Text, View, Button } from "react-native"; 2 import { StyleSheet, Text, View, Button } from "react-native";
3 -import { Icon } from "native-base"; // 추가된 코드
4 import { createAppContainer } from "react-navigation"; 3 import { createAppContainer } from "react-navigation";
5 import { createStackNavigator } from "react-navigation-stack"; 4 import { createStackNavigator } from "react-navigation-stack";
6 import { createMaterialTopTabNavigator } from "react-navigation-tabs"; 5 import { createMaterialTopTabNavigator } from "react-navigation-tabs";
...@@ -8,18 +7,19 @@ import SeenMovieTab from "./AppTabNavigator/MovieRankingTab"; ...@@ -8,18 +7,19 @@ import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
8 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; 7 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
9 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab"; 8 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
10 import Search from ".//AppTabNavigator/Search"; 9 import Search from ".//AppTabNavigator/Search";
10 +import Detail from "./AppTabNavigator/Detail";
11 import { Platform } from "react-native"; 11 import { Platform } from "react-native";
12 -import { black } from "ansi-colors"; 12 +import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
13 -import { colors } from "react-native-elements";
14 -//import { Ionicons } from '@expo/vector-icons';
15 13
16 const AppTabNavigator = createMaterialTopTabNavigator( 14 const AppTabNavigator = createMaterialTopTabNavigator(
17 { 15 {
18 SeenMovieTab: { screen: SeenMovieTab }, 16 SeenMovieTab: { screen: SeenMovieTab },
19 MovieRankingTab: { screen: MovieRankingTab }, 17 MovieRankingTab: { screen: MovieRankingTab },
20 WantToWatchTab: { screen: WantToWatchTab }, 18 WantToWatchTab: { screen: WantToWatchTab },
21 - Search: { screen: Search } 19 + Search: { screen: Search },
20 + Detail: { screen: Detail }
22 }, 21 },
22 +
23 { 23 {
24 animationEnabled: true, 24 animationEnabled: true,
25 swipeEnabled: true, 25 swipeEnabled: true,
......