신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
신승민
f7ea7781 1 parent b9cbd619

Final

Expand all
Inline Side-by-side
Showing 10 changed files with 397 additions and 158 deletions
1 -import React, { Component } from "react";
2 -import { StyleSheet, Text, View } from "react-native";
3 import { createAppContainer } from "react-navigation"; 1 import { createAppContainer } from "react-navigation";
4 import { createStackNavigator } from "react-navigation-stack"; 2 import { createStackNavigator } from "react-navigation-stack";
5 import MainScreen from "./Components/MainScreen"; 3 import MainScreen from "./Components/MainScreen";
6 -import Detail from "./Components/AppTabNavigator/Detail"
7 -// import MovieInfo from "./Components/MovieInfo";
8 4
9 const AppStackNavigator = createStackNavigator({ 5 const AppStackNavigator = createStackNavigator({
10 Main: { 6 Main: {
11 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록 7 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
12 }, 8 },
13 - Datail:{
14 - screen: Detail
15 - }
16 }); 9 });
17 10
18 export default createAppContainer(AppStackNavigator); 11 export default createAppContainer(AppStackNavigator);
......
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 -import { View, Text, StyleSheet, Button } from 'react-native'; 2 +import {
3 -import { Icon } from 'native-base'; 3 + View,
4 -import { NavigationActions, createStackNavigator, withNavigation } from 'react-navigation'; 4 + Text,
5 -import MovieRankingTab from './MovieRankingTab' 5 + StyleSheet,
6 + Image,
7 + TouchableOpacity
8 +} from "react-native";
9 +import { Icon } from "native-base";
10 +import { AntDesign } from "@expo/vector-icons";
11 +import {
12 + SafeAreaView,
13 + ScrollView
14 +} from "react-navigation";
15 +import axios from "axios";
16 +import { AsyncStorage } from "react-native";
6 17
7 -getDB = async search => { 18 +export default class Detail extends Component {
19 + static navigationOptions = {
20 + tabBarIcon: ({ tintColor }) => (
21 + <Icon name="ios-reorder" style={{ color: tintColor }} />
22 + )
23 + };
24 +
25 + state = {
26 + title: "",
27 + overview: "",
28 + release_date: "",
29 + url: "",
30 + back: "",
31 + key: ""
32 + };
33 +
34 + getDB = async search => {
8 axios 35 axios
9 .get( 36 .get(
10 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1` 37 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
11 ) 38 )
12 .then(response => { 39 .then(response => {
13 - this.setState({ results: response.data.results }); 40 + this.setState({
14 - console.log(response.data.results); 41 + title: response.data.results[0].title,
42 + overview: response.data.results[0].overview + "\n\n\n",
43 + release_date: response.data.results[0].release_date,
44 + url: response.data.results[0].poster_path,
45 + back: response.data.results[0].backdrop_path
46 + });
15 }); 47 });
16 }; 48 };
17 -
18 getNaverApi = async search => { 49 getNaverApi = async search => {
19 fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, { 50 fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
20 headers: { 51 headers: {
...@@ -26,40 +57,214 @@ getDB = async search => { ...@@ -26,40 +57,214 @@ getDB = async search => {
26 .then(json => this.setState({ items: json.items })); 57 .then(json => this.setState({ items: json.items }));
27 }; 58 };
28 59
29 - searching = typing => { 60 + _AllKeys = async() => {
30 - this.setState({ 61 + try {
31 - keyword: typing, 62 + this.state.key = await AsyncStorage.getAllKeys();
32 - typing: "" 63 + console.log(this.state.key)
33 - }); 64 +
34 - this.getDB(typing); 65 + } catch (error){
35 - };
36 66
67 + }
68 + }
37 69
70 + componentDidMount() {
71 + this._AllKeys()
72 + }
73 +
74 + _onPressButton() {
75 + this._AllKeys()
76 + for( var value of this.state.key)
77 + {
78 + if ( value == this.state.title)
79 + {
80 + AsyncStorage.removeItem(this.state.title)
81 + console.log("1")
82 + return
83 + }
84 + }
85 + AsyncStorage.setItem(this.state.title,this.state.title)
86 + console.log("2")
87 + }
38 88
39 -export default class Detail extends Component { 89 + render() {
40 - static navigationOptions = { 90 + const { navigation } = this.props;
41 - tabBarIcon: ({ tintColor }) => ( 91 + var temp = navigation.getParam("title", "");
42 - <Icon name="ios-albums" style={{ color: tintColor }} /> 92 + this.getDB(temp);
43 - ) 93 + return (
44 - }; 94 + <SafeAreaView style={styles.container}>
45 - 95 + <ScrollView style={styles.container}>
46 - render() { 96 + <View style={styles.container1}>
47 - const { navigation } = this.props; 97 + <View style={styles.posterContainer}>
48 - return ( 98 + <View style={styles.backgroundContainer}>
49 - <View style={style.container}> 99 + <Image
50 - <Text> 100 + source={{
51 - {navigation.getParam("name")} 101 + uri: `https://image.tmdb.org/t/p/original${this.state.back}`
52 - </Text> 102 + }}
103 + style={styles.posterBack}
104 + />
105 + </View>
106 + <View style={styles.overlay}>
107 + <Image
108 + source={{
109 + uri: `https://image.tmdb.org/t/p/original${this.state.url}`
110 + }}
111 + style={styles.posterFront}
112 + />
113 + <View style={styles.posterTitle}>
114 + <Text style={styles.Title}>{this.state.title}</Text>
115 + </View>
116 + </View>
117 + </View>
118 + </View>
119 + <View style={styles.container2}>
120 + <View>
121 + <Text style={styles.name}>{this.state.title}</Text>
53 </View> 122 </View>
54 - ); 123 + <View style={styles.lowContainer}>
55 - } 124 + <Text style={styles.overview}>{this.state.release_date}</Text>
125 + <View style={styles.buttonLayout}>
126 + <TouchableOpacity
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 + </View>
135 + </ScrollView>
136 + </SafeAreaView>
137 + );
138 + }
56 } 139 }
57 -const style = StyleSheet.create({
58 - container: {
59 - flex: 1,
60 - alignItems: 'center',
61 - justifyContent: 'center',
62 - }
63 -});
64 140
65 -//export default withNavigation(Detail);
...\ No newline at end of file ...\ No newline at end of file
141 +const styles = StyleSheet.create({
142 + container: {
143 + flex: 1,
144 + backgroundColor: "black"
145 + },
146 + container1: {
147 + flex: 1,
148 + backgroundColor: "black"
149 + },
150 + container2: {
151 + flex: 2,
152 + backgroundColor: "black"
153 + },
154 + backgroundContainer: {
155 + position: "absolute",
156 + top: 0,
157 + bottom: 0,
158 + left: 0,
159 + right: 0,
160 + justifyContent: "flex-start"
161 + },
162 + overlay: {
163 + flexDirection: "row"
164 + },
165 + posterContainer: {
166 + flex: 1,
167 + alignItems: "flex-start",
168 + justifyContent: "flex-end"
169 + },
170 + posterTitle: {
171 + flex: 1,
172 + alignItems: "flex-start",
173 + justifyContent: "flex-end"
174 + },
175 + posterBack: {
176 + width: "100%",
177 + height: "100%"
178 + },
179 + posterFront: {
180 + marginTop: 100,
181 + marginLeft: 10,
182 + marginBottom: 10,
183 + width: 120,
184 + height: 160
185 + },
186 +
187 + buttonLayout: {
188 + marginLeft: "auto",
189 + marginRight: 20,
190 + justifyContent: "space-around",
191 + flexDirection: "row"
192 + },
193 + button: {
194 + fontSize: 30
195 + },
196 + searchContainer: {
197 + backgroundColor: "black",
198 + marginLeft: 40,
199 + marginRight: 40
200 + },
201 + input: {
202 + borderRadius: 10,
203 + backgroundColor: "#FFF",
204 + paddingLeft: 10,
205 + paddingRight: 10,
206 + height: 50,
207 + alignItems: "center",
208 + flexDirection: "row",
209 + justifyContent: "space-between",
210 + borderBottomColor: "#bbb",
211 + borderBottomWidth: StyleSheet.hairlineWidth
212 + },
213 + inputText: {
214 + flex: 1
215 + },
216 + addBtn: {
217 + color: "#4169E1"
218 + },
219 + imagecontainer: {
220 + flex: 1
221 + },
222 + lowContainer: {
223 + backgroundColor: "black",
224 + flex: 1,
225 + flexDirection: "row"
226 + },
227 + leftContainer: {
228 + flex: 1,
229 + backgroundColor: "black",
230 + justifyContent: "center",
231 + alignItems: "center"
232 + },
233 + rightContainer: {
234 + flex: 2,
235 + backgroundColor: "black"
236 + },
237 + rightUpContainer: {
238 + flex: 1,
239 + backgroundColor: "black",
240 + paddingTop: 35,
241 + justifyContent: "center",
242 + marginLeft: 20
243 + },
244 + rightDownContainer: {
245 + flex: 3,
246 + backgroundColor: "black",
247 + paddingBottom: 10
248 + },
249 +
250 + Title: {
251 + marginLeft: 25,
252 + marginTop: 10,
253 + marginBottom: 20,
254 + fontSize: 25,
255 + fontWeight: "bold",
256 + color: "white"
257 + },
258 + name: {
259 + marginLeft: 10,
260 + marginTop: 10,
261 + marginBottom: 5,
262 + fontSize: 16,
263 + color: "white"
264 + },
265 + overview: {
266 + marginLeft: 5,
267 + fontSize: 14,
268 + color: "white"
269 + }
270 +});
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
...@@ -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,16 @@ export default class Search extends Component { ...@@ -91,12 +92,16 @@ 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 {
95 + <TouchableOpacity
96 + onPress = { () => this.props.navigation.navigate('Detail', {title: result.title} )}
97 + >
94 <Image 98 <Image
95 source={{ 99 source={{
96 uri: `https://image.tmdb.org/t/p/original/${result.poster_path}` 100 uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
97 }} 101 }}
98 style={styles.poster} 102 style={styles.poster}
99 /> 103 />
104 + </TouchableOpacity>
100 } 105 }
101 </CardItem> 106 </CardItem>
102 </View> 107 </View>
...@@ -205,4 +210,4 @@ const styles = StyleSheet.create({ ...@@ -205,4 +210,4 @@ const styles = StyleSheet.create({
205 fontSize: 14, 210 fontSize: 14,
206 color: "white" 211 color: "white"
207 } 212 }
208 -}); 213 +});
...\ 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 { View, Text, StyleSheet, Button } from "react-native"; 2 +import { View, Text, StyleSheet } from "react-native";
3 import { Icon } from "native-base"; 3 import { Icon } from "native-base";
4 -import { withNavigation } from 'react-navigation';
5 -import { navigation, StackActions, NavigationActions } from 'react-navigation';
6 import 'react-native-gesture-handler' 4 import 'react-native-gesture-handler'
7 -import Detail from './Detail'
8 5
9 export default class SeenMovieTab extends Component { 6 export default class SeenMovieTab extends Component {
10 static navigationOptions = { 7 static navigationOptions = {
...@@ -17,7 +14,6 @@ export default class SeenMovieTab extends Component { ...@@ -17,7 +14,6 @@ export default class SeenMovieTab extends Component {
17 return ( 14 return (
18 <View style={style.container}> 15 <View style={style.container}>
19 <Text>SeenMovieTab</Text> 16 <Text>SeenMovieTab</Text>
20 - <Button title = 'hi' onPress = { () => this.props.navigation.navigate('Detail')} />
21 </View> 17 </View>
22 ); 18 );
23 } 19 }
......
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 - ScrollView, 8 + SafeAreaView,
9 - Image, 9 + ScrollView,
10 -} from 'react-native'; 10 + RefreshControl,
11 -import { Icon } from "native-base"; 11 + Alert,
12 + Image
13 +} from "react-native";
14 +import { Card, CardItem, Icon } from "native-base";
12 import axios from "axios"; 15 import axios from "axios";
16 +import MovieRankingTab from "./MovieRankingTab";
17 +import { symbol } from "prop-types";
13 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 18 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
14 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 19 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
15 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 20 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
16 21
17 22
18 export default class App extends Component { 23 export default class App extends Component {
19 - state = { 24 + state = {
20 - list: "", //영화 제목 list 25 + list: [], //영화 제목 list
21 - date: "", //날짜 26 + date: "", //날짜
22 - imgurl0: [], //이미지 27 + names: [], // api로 받아오 영화 제목
23 - name0: [], //제목 28 + imgurls: [], //이미지
24 - }; 29 + name0: [], //제목
30 + results: [], // json 오브젝트
31 + title: "",
32 + dummy: 1
33 + };
25 34
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 - this.setData();
39 - }
40 35
41 - getMovieList = async date => { 36 + //네비게이션 바
37 + static navigationOptions = {
38 + tabBarIcon: ({ tintColor }) => (
39 + <Icon name="ios-star-outline" style={{ color: tintColor }} />
40 + )
41 + };
42 +
43 + //Data 설정함수
44 + setData = async () => {
45 + try {
46 +
47 + this.state.list = await AsyncStorage.getAllKeys();
48 +
49 + for (var i = 0; i < this.state.list.length; i++) {
42 axios 50 axios
43 .get( 51 .get(
44 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}` 52 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
45 - )
46 - .then(
47 - response => {
48 - this.setState({
49 - //영화 제목
50 - name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
51 - });
52 -
53 - temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
54 - fetch(
55 - `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
56 - {
57 - headers: {
58 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
59 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
60 - }
61 - }
62 - )
63 - .then(response => response.json())
64 - .then(json => {
65 - this.setState({
66 - imgurl0: json.items[0].image
67 - });
68 - });
69 - }
70 ) 53 )
71 - .catch(error => { 54 + .then(response => {
72 - console.log(error); 55 + var joined = this.state.imgurls.concat(
73 - }); 56 + response.data.results[0].poster_path
74 - }; 57 + );
75 - 58 + var result = this.state.results.concat(response.data.results[0]);
76 - //네비게이션 바
77 - static navigationOptions = {
78 - tabBarIcon: ({ tintColor }) => (
79 - <Icon name='ios-star' style={{ color: tintColor }} />
80 - )
81 - }
82 59
83 - //Data 설정함수 60 + this.setState({
84 - setData = async () => { 61 + imgurls: joined,
85 - try { 62 + results: result
86 - this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다 63 + });
87 - //console.log(this.state.list); //잘 뜨는데?? 64 + console.log("list", this.state.list);
88 - } 65 + console.log("imgurls", this.state.imgurls);
89 - catch (error) { 66 + });
90 - alert(error) 67 + }
91 - } 68 + } catch (error) {
69 + alert(error);
92 } 70 }
71 + };
93 72
73 + componentDidMount() {
74 + this.setData();
75 + }
94 76
95 - render() { 77 + render() {
96 - return ( 78 + return (
79 + <View style={styles.container}>
80 + <SafeAreaView style={styles.container}>
81 + <ScrollView style={styles.container}>
97 <View style={styles.container}> 82 <View style={styles.container}>
98 - <TouchableOpacity onPress={this.componentDidMount.bind(this)}> 83 + {this.state.results.map(item => (
99 - {/* 눌러용 누르면 리스트 갱신됩니다 */} 84 + <View style={styles.lowContainer}>
100 - <Text style={styles.textStyle}>눌러용</Text> 85 + <View style={styles.leftContainer}>
101 - </TouchableOpacity> 86 + <CardItem style={styles.container}>
102 - <Text style={styles.textStyle}>{this.state.list}</Text> 87 + {
88 + <TouchableOpacity
89 + onPress = { () => this.props.navigation.navigate('Detail', {title: item.title} )}
90 + >
91 + <Image
92 + style={styles.poster}
93 + source={{
94 + uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
95 + }}
96 + />
97 + </TouchableOpacity>
98 + }
99 + </CardItem>
100 + </View>
101 + <View style={styles.rightContainer}>
102 + <CardItem style={styles.container}>
103 + <View style={styles.container}>
104 + <Text style={styles.textStyle}>{item.title}</Text>
105 + </View>
106 + </CardItem>
107 + </View>
108 + </View>
109 + ))}
103 </View> 110 </View>
104 - ); 111 + </ScrollView>
105 - } 112 + </SafeAreaView>
113 + </View>
114 + );
115 + }
106 } 116 }
107 117
108 const styles = StyleSheet.create({ 118 const styles = StyleSheet.create({
109 container: { 119 container: {
110 backgroundColor: "black", 120 backgroundColor: "black",
121 + flex: 1
122 + },
123 + lowContainer: {
124 + marginLeft: 15,
125 + backgroundColor: "black",
111 flex: 1, 126 flex: 1,
112 - alignItems: "center", 127 + flexDirection: "row",
113 - justifyContent: "center" 128 + justifyContent: "center",
129 + alignItems: "center"
130 + },
131 + leftContainer: {
132 + flex: 1,
133 + backgroundColor: "black",
134 + justifyContent: "center",
135 + alignItems: "center"
136 + },
137 + rightContainer: {
138 + flex: 2,
139 + backgroundColor: "black"
140 + },
141 + rightUpContainer: {
142 + flex: 1,
143 + backgroundColor: "black",
144 + paddingTop: 35,
145 + justifyContent: "center",
146 + marginLeft: 20
147 + },
148 + rightDownContainer: {
149 + flex: 3,
150 + backgroundColor: "black",
151 + paddingBottom: 10
152 + },
153 + poster: {
154 + resizeMode: "cover",
155 + flex: 10,
156 + width: "40%",
157 + height: 80,
158 + paddingHorizontal: 58,
159 + alignItems: "stretch",
160 + borderRadius: 7
114 }, 161 },
115 textStyle: { 162 textStyle: {
116 - fontSize: 25, 163 + fontSize: 16,
117 - color: "white", 164 + color: "white"
118 -}, 165 + },
119 -}); 166 + overview: {
167 + fontSize: 14,
168 + color: "white"
169 + }
170 +});
...\ 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 { StyleSheet, Text, View, Button } from "react-native"; 2 import { StyleSheet, Text, View, Button } from "react-native";
3 import { createAppContainer } from "react-navigation"; 3 import { createAppContainer } from "react-navigation";
4 -import { createStackNavigator } from "react-navigation-stack";
5 import { createMaterialTopTabNavigator } from "react-navigation-tabs"; 4 import { createMaterialTopTabNavigator } from "react-navigation-tabs";
6 import SeenMovieTab from "./AppTabNavigator/MovieRankingTab"; 5 import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
7 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; 6 import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
...@@ -9,15 +8,6 @@ import WantToWatchTab from "./AppTabNavigator/SeenMovieTab"; ...@@ -9,15 +8,6 @@ import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
9 import Search from ".//AppTabNavigator/Search"; 8 import Search from ".//AppTabNavigator/Search";
10 import Detail from "./AppTabNavigator/Detail" 9 import Detail from "./AppTabNavigator/Detail"
11 import { Platform } from "react-native"; 10 import { Platform } from "react-native";
12 -import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
13 -
14 -
15 -state = {
16 - hi:""
17 -}
18 -props = {
19 - bye : ""
20 -}
21 11
22 const AppTabNavigator = createMaterialTopTabNavigator( 12 const AppTabNavigator = createMaterialTopTabNavigator(
23 { 13 {
...@@ -28,6 +18,7 @@ const AppTabNavigator = createMaterialTopTabNavigator( ...@@ -28,6 +18,7 @@ const AppTabNavigator = createMaterialTopTabNavigator(
28 Detail: { screen: Detail } 18 Detail: { screen: Detail }
29 }, 19 },
30 20
21 +
31 { 22 {
32 animationEnabled: true, 23 animationEnabled: true,
33 swipeEnabled: true, 24 swipeEnabled: true,
...@@ -54,10 +45,8 @@ const AppTabContainet = createAppContainer(AppTabNavigator); ...@@ -54,10 +45,8 @@ const AppTabContainet = createAppContainer(AppTabNavigator);
54 45
55 46
56 export default class MainScreen extends Component { 47 export default class MainScreen extends Component {
57 - // navigationOptions 코드 추가
58 static navigationOptions = { 48 static navigationOptions = {
59 - //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 49 + title: " Pocket Movie",
60 - title: " Poket Movie",
61 headerStyle: { 50 headerStyle: {
62 backgroundColor: "black" 51 backgroundColor: "black"
63 }, 52 },
......
No preview for this file type