신승민 / pocketMovie

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

project

Inline Side-by-side
Showing 7 changed files with 251 additions and 114 deletions
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 -import { View, Text, StyleSheet, Button, Image } from "react-native"; 2 +import {
3 + View,
4 + Text,
5 + StyleSheet,
6 + Button,
7 + Image,
8 + TouchableOpacity
9 +} from "react-native";
3 import { Icon } from "native-base"; 10 import { Icon } from "native-base";
11 +import { Ionicons, AntDesign } from "@expo/vector-icons";
4 import { 12 import {
5 NavigationActions, 13 NavigationActions,
6 createStackNavigator, 14 createStackNavigator,
7 - withNavigation 15 + withNavigation,
16 + SafeAreaView,
17 + ScrollView
8 } from "react-navigation"; 18 } from "react-navigation";
9 import axios from "axios"; 19 import axios from "axios";
10 import { AsyncStorage } from "react-native"; 20 import { AsyncStorage } from "react-native";
...@@ -12,15 +22,17 @@ import { AsyncStorage } from "react-native"; ...@@ -12,15 +22,17 @@ import { AsyncStorage } from "react-native";
12 export default class Detail extends Component { 22 export default class Detail extends Component {
13 static navigationOptions = { 23 static navigationOptions = {
14 tabBarIcon: ({ tintColor }) => ( 24 tabBarIcon: ({ tintColor }) => (
15 - <Icon name="ios-albums" style={{ color: tintColor }} /> 25 + <Icon name="ios-reorder" style={{ color: tintColor }} />
16 ) 26 )
17 }; 27 };
18 28
19 state = { 29 state = {
20 - title: "1", 30 + title: "",
21 overview: "", 31 overview: "",
22 release_date: "", 32 release_date: "",
23 - url: "" 33 + url: "",
34 + back: "",
35 + key: ""
24 }; 36 };
25 37
26 getDB = async search => { 38 getDB = async search => {
...@@ -31,9 +43,10 @@ export default class Detail extends Component { ...@@ -31,9 +43,10 @@ export default class Detail extends Component {
31 .then(response => { 43 .then(response => {
32 this.setState({ 44 this.setState({
33 title: response.data.results[0].title, 45 title: response.data.results[0].title,
34 - overview: response.data.results[0].overview, 46 + overview: response.data.results[0].overview + "\n\n\n",
35 release_date: response.data.results[0].release_date, 47 release_date: response.data.results[0].release_date,
36 - url: response.data.results[0].poster_path 48 + url: response.data.results[0].poster_path,
49 + back: response.data.results[0].backdrop_path
37 }); 50 });
38 }); 51 });
39 }; 52 };
...@@ -48,27 +61,28 @@ export default class Detail extends Component { ...@@ -48,27 +61,28 @@ export default class Detail extends Component {
48 .then(json => this.setState({ items: json.items })); 61 .then(json => this.setState({ items: json.items }));
49 }; 62 };
50 63
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 _AllKeys = async () => {
64 - const key = await AsyncStorage.getAllKeys(); 65 + try {
65 - console.log(key); 66 + this.state.key = await AsyncStorage.getAllKeys();
67 + console.log(this.state.key);
68 + } catch (error) {}
66 }; 69 };
67 70
68 componentDidMount() { 71 componentDidMount() {
69 - // this._retrieveData("겨울왕국 2"); 72 + this._AllKeys();
70 - // this._AllKeys(); 73 + }
71 - // AsyncStorage.removeItem("1"); 74 +
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");
72 } 86 }
73 87
74 render() { 88 render() {
...@@ -76,34 +90,54 @@ export default class Detail extends Component { ...@@ -76,34 +90,54 @@ export default class Detail extends Component {
76 var temp = navigation.getParam("title", ""); 90 var temp = navigation.getParam("title", "");
77 this.getDB(temp); 91 this.getDB(temp);
78 return ( 92 return (
79 - <View style={style.container}> 93 + <SafeAreaView style={styles.container}>
80 - <Text>{this.state.title}</Text> 94 + <ScrollView style={styles.container}>
81 - <Text>{this.state.release_date}</Text> 95 + <View style={styles.container1}>
82 - <Text>{this.state.overview}</Text> 96 + <View style={styles.posterContainer}>
83 - <Text>{this.state.url}</Text> 97 + <View style={styles.backgroundContainer}>
84 - <Image 98 + <Image
85 - source={{ 99 + source={{
86 - uri: `https://image.tmdb.org/t/p/original${this.state.url}` 100 + uri: `https://image.tmdb.org/t/p/original${this.state.back}`
87 - }} 101 + }}
88 - style={styles.poster} 102 + style={styles.posterBack}
89 - /> 103 + />
90 - <Button 104 + </View>
91 - title="추가 " 105 + <View style={styles.overlay}>
92 - onPress={() => 106 + <Image
93 - AsyncStorage.setItem(this.state.title, this.state.title) 107 + source={{
94 - } 108 + uri: `https://image.tmdb.org/t/p/original${this.state.url}`
95 - /> 109 + }}
96 - </View> 110 + style={styles.posterFront}
111 + />
112 + <View style={styles.posterTitle}>
113 + <Text style={styles.Title}>{this.state.title}</Text>
114 + </View>
115 + </View>
116 + </View>
117 + </View>
118 + <View style={styles.container2}>
119 + <View>
120 + <Text style={styles.name}>{this.state.title}</Text>
121 + </View>
122 + <View style={styles.lowContainer}>
123 + <Text style={styles.overview}>{this.state.release_date}</Text>
124 + <View style={styles.buttonLayout}>
125 + <TouchableOpacity
126 + // title="추가 "
127 + onPress={() => this._onPressButton()}
128 + >
129 + <AntDesign name="star" color="yellow" style={styles.button} />
130 + </TouchableOpacity>
131 + </View>
132 + </View>
133 + <Text style={styles.overview}>{this.state.overview}</Text>
134 + {/* <Text style={styles.overview}>{this.state.url}</Text> */}
135 + </View>
136 + </ScrollView>
137 + </SafeAreaView>
97 ); 138 );
98 } 139 }
99 } 140 }
100 -const style = StyleSheet.create({
101 - container: {
102 - flex: 1,
103 - alignItems: "center",
104 - justifyContent: "center"
105 - }
106 -});
107 141
108 //export default withNavigation(Detail); 142 //export default withNavigation(Detail);
109 143
...@@ -112,6 +146,78 @@ const styles = StyleSheet.create({ ...@@ -112,6 +146,78 @@ const styles = StyleSheet.create({
112 flex: 1, 146 flex: 1,
113 backgroundColor: "black" 147 backgroundColor: "black"
114 }, 148 },
149 + container1: {
150 + flex: 1,
151 + backgroundColor: "black"
152 + },
153 + container2: {
154 + flex: 2,
155 + backgroundColor: "black"
156 + },
157 + backgroundContainer: {
158 + position: "absolute",
159 + top: 0,
160 + bottom: 0,
161 + left: 0,
162 + right: 0,
163 + justifyContent: "flex-start"
164 + },
165 + overlay: {
166 + flexDirection: "row"
167 + // opacity: 0.5,
168 + // backgroundColor: "#000000"
169 + // alignItems: "center",
170 + // justifyContent: "flex-end"
171 + },
172 + posterContainer: {
173 + flex: 1,
174 + alignItems: "flex-start",
175 + justifyContent: "flex-end"
176 + },
177 + posterTitle: {
178 + flex: 1,
179 + alignItems: "flex-start",
180 + justifyContent: "flex-end"
181 + },
182 + posterBack: {
183 + // resizeMode: "cover",
184 + // flex: 10,
185 + width: "100%",
186 + height: "100%"
187 + // marginLeft: 10,
188 + // paddingHorizontal: 50
189 + // alignItems: "stretch",
190 + // alignItems: "center"
191 + // borderRadius: 7
192 + },
193 + posterFront: {
194 + // resizeMode: "cover",
195 + // alignItems: "center",
196 + // justifyContent: "flex-end",
197 + // flex: 10,
198 + marginTop: 100,
199 + marginLeft: 10,
200 + marginBottom: 10,
201 + width: 120,
202 + height: 160
203 + // marginLeft: 10,
204 + // paddingHorizontal: 45,
205 + // alignItems: "stretch",
206 + // borderRadius: 7
207 + },
208 +
209 + buttonLayout: {
210 + marginLeft: "auto",
211 + marginRight: 20,
212 + justifyContent: "space-around",
213 + // marginBottom: 10,
214 + flexDirection: "row"
215 + },
216 + button: {
217 + fontSize: 30
218 + // width: 30,
219 + // height: 30
220 + },
115 searchContainer: { 221 searchContainer: {
116 backgroundColor: "black", 222 backgroundColor: "black",
117 marginLeft: 40, 223 marginLeft: 40,
...@@ -141,9 +247,9 @@ const styles = StyleSheet.create({ ...@@ -141,9 +247,9 @@ const styles = StyleSheet.create({
141 lowContainer: { 247 lowContainer: {
142 backgroundColor: "black", 248 backgroundColor: "black",
143 flex: 1, 249 flex: 1,
144 - flexDirection: "row", 250 + flexDirection: "row"
145 - justifyContent: "center", 251 + // justifyContent: "center",
146 - alignItems: "center" 252 + // alignItems: "center"
147 }, 253 },
148 leftContainer: { 254 leftContainer: {
149 flex: 1, 255 flex: 1,
...@@ -167,21 +273,24 @@ const styles = StyleSheet.create({ ...@@ -167,21 +273,24 @@ const styles = StyleSheet.create({
167 backgroundColor: "black", 273 backgroundColor: "black",
168 paddingBottom: 10 274 paddingBottom: 10
169 }, 275 },
170 - poster: { 276 +
171 - resizeMode: "cover", 277 + Title: {
172 - flex: 10, 278 + marginLeft: 25,
173 - width: "30%", 279 + marginTop: 10,
174 - height: 160, 280 + marginBottom: 20,
175 - marginLeft: 10, 281 + fontSize: 25,
176 - paddingHorizontal: 50, 282 + fontWeight: "bold",
177 - alignItems: "stretch", 283 + color: "white"
178 - borderRadius: 7
179 }, 284 },
180 name: { 285 name: {
286 + marginLeft: 10,
287 + marginTop: 10,
288 + marginBottom: 5,
181 fontSize: 16, 289 fontSize: 16,
182 color: "white" 290 color: "white"
183 }, 291 },
184 overview: { 292 overview: {
293 + marginLeft: 5,
185 fontSize: 14, 294 fontSize: 14,
186 color: "white" 295 color: "white"
187 } 296 }
......
...@@ -62,6 +62,7 @@ export default class Search extends Component { ...@@ -62,6 +62,7 @@ export default class Search extends Component {
62 }; 62 };
63 63
64 render() { 64 render() {
65 + console.log("1");
65 return ( 66 return (
66 <View style={styles.container}> 67 <View style={styles.container}>
67 <View style={styles.container}> 68 <View style={styles.container}>
...@@ -91,12 +92,20 @@ export default class Search extends Component { ...@@ -91,12 +92,20 @@ export default class Search extends Component {
91 <View style={styles.leftContainer}> 92 <View style={styles.leftContainer}>
92 <CardItem style={styles.container}> 93 <CardItem style={styles.container}>
93 { 94 {
94 - <Image 95 + <TouchableOpacity
95 - source={{ 96 + onPress={() =>
96 - uri: `https://image.tmdb.org/t/p/original/${result.poster_path}` 97 + this.props.navigation.navigate("Detail", {
97 - }} 98 + title: result.title
98 - style={styles.poster} 99 + })
99 - /> 100 + }
101 + >
102 + <Image
103 + source={{
104 + uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
105 + }}
106 + style={styles.poster}
107 + />
108 + </TouchableOpacity>
100 } 109 }
101 </CardItem> 110 </CardItem>
102 </View> 111 </View>
......
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
7 AsyncStorage, 7 AsyncStorage,
8 SafeAreaView, 8 SafeAreaView,
9 ScrollView, 9 ScrollView,
10 + RefreshControl,
10 Alert, 11 Alert,
11 Image 12 Image
12 } from "react-native"; 13 } from "react-native";
...@@ -32,7 +33,7 @@ export default class App extends Component { ...@@ -32,7 +33,7 @@ export default class App extends Component {
32 //네비게이션 바 33 //네비게이션 바
33 static navigationOptions = { 34 static navigationOptions = {
34 tabBarIcon: ({ tintColor }) => ( 35 tabBarIcon: ({ tintColor }) => (
35 - <Icon name="ios-star" style={{ color: tintColor }} /> 36 + <Icon name="ios-star-outline" style={{ color: tintColor }} />
36 ) 37 )
37 }; 38 };
38 39
...@@ -115,54 +116,44 @@ export default class App extends Component { ...@@ -115,54 +116,44 @@ export default class App extends Component {
115 render() { 116 render() {
116 return ( 117 return (
117 <View style={styles.container}> 118 <View style={styles.container}>
118 - {/* <TouchableOpacity onPress={this.setData.bind(this)}> */}
119 - {/* 버튼 누르면 리스트 갱신됩니다 */}
120 - {/* <Image source={require("../../assets/refresh.png")} /> */}
121 - {/* <Text style={styles.textStyle}>Refresh Button</Text> */}
122 - {/* </TouchableOpacity> */}
123 {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */} 119 {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
124 - <SafeAreaView> 120 + <SafeAreaView style={styles.container}>
125 - <ScrollView> 121 + <ScrollView style={styles.container}>
126 - <Card> 122 + <View style={styles.container}>
127 - {/* <View> 123 + {/* <Card> */}
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 => ( 124 {this.state.results.map(item => (
145 <View style={styles.lowContainer}> 125 <View style={styles.lowContainer}>
146 - <View> 126 + <View style={styles.leftContainer}>
147 - <CardItem> 127 + <CardItem style={styles.container}>
148 { 128 {
149 - <Image 129 + <TouchableOpacity
150 - style={styles.poster} 130 + onPress={() =>
151 - source={{ 131 + this.props.navigation.navigate("Detail", {
152 - uri: `https://image.tmdb.org/t/p/original/${item.poster_path}` 132 + title: item.title
153 - }} 133 + })
154 - /> 134 + }
135 + >
136 + <Image
137 + style={styles.poster}
138 + source={{
139 + uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
140 + }}
141 + />
142 + </TouchableOpacity>
155 } 143 }
156 </CardItem> 144 </CardItem>
157 - <CardItem> 145 + </View>
158 - <View> 146 + <View style={styles.rightContainer}>
147 + <CardItem style={styles.container}>
148 + <View style={styles.container}>
159 <Text style={styles.textStyle}>{item.title}</Text> 149 <Text style={styles.textStyle}>{item.title}</Text>
160 </View> 150 </View>
161 </CardItem> 151 </CardItem>
162 </View> 152 </View>
163 </View> 153 </View>
164 ))} 154 ))}
165 - </Card> 155 + {/* </Card> */}
156 + </View>
166 </ScrollView> 157 </ScrollView>
167 </SafeAreaView> 158 </SafeAreaView>
168 </View> 159 </View>
...@@ -178,33 +169,50 @@ const styles = StyleSheet.create({ ...@@ -178,33 +169,50 @@ const styles = StyleSheet.create({
178 // justifyContent: "center" 169 // justifyContent: "center"
179 }, 170 },
180 lowContainer: { 171 lowContainer: {
172 + marginLeft: 15,
173 + backgroundColor: "black",
181 flex: 1, 174 flex: 1,
182 flexDirection: "row", 175 flexDirection: "row",
183 - backgroundColor: "black",
184 - // alignContent: "space-around",
185 justifyContent: "center", 176 justifyContent: "center",
186 alignItems: "center" 177 alignItems: "center"
187 - // marginLeft: 10,
188 - // marginTop: 10,
189 - // marginBottom: 20
190 }, 178 },
191 - halfContainer: { 179 + leftContainer: {
192 flex: 1, 180 flex: 1,
193 - backgroundColor: "yellow", 181 + backgroundColor: "black",
194 justifyContent: "center", 182 justifyContent: "center",
195 alignItems: "center" 183 alignItems: "center"
196 }, 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 + },
197 poster: { 201 poster: {
198 - // resizeMode: "cover", 202 + resizeMode: "cover",
199 flex: 10, 203 flex: 10,
200 width: "40%", 204 width: "40%",
201 - height: 120, 205 + height: 80,
202 paddingHorizontal: 58, 206 paddingHorizontal: 58,
203 alignItems: "stretch", 207 alignItems: "stretch",
204 borderRadius: 7 208 borderRadius: 7
205 }, 209 },
206 textStyle: { 210 textStyle: {
207 - fontSize: 25, 211 + fontSize: 16,
212 + color: "white"
213 + },
214 + overview: {
215 + fontSize: 14,
208 color: "white" 216 color: "white"
209 } 217 }
210 }); 218 });
......
No preview for this file type
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