신승민 / pocketMovie

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

v1.1.0 +코드 리팩토링 -봤던 영화 목록

Expand all
Inline Side-by-side
Showing 19 changed files with 434 additions and 323 deletions
...@@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from "react-native"; ...@@ -3,14 +3,14 @@ import { StyleSheet, Text, View } from "react-native";
3 import { createAppContainer } from "react-navigation"; 3 import { createAppContainer } from "react-navigation";
4 import { createStackNavigator } from "react-navigation-stack"; 4 import { createStackNavigator } from "react-navigation-stack";
5 import MainScreen from "./Components/MainScreen"; 5 import MainScreen from "./Components/MainScreen";
6 -import Detail from "./Components/AppTabNavigator/Detail" 6 +import Detail from "./Components/AppTabNavigator/Detail";
7 // import MovieInfo from "./Components/MovieInfo"; 7 // import MovieInfo from "./Components/MovieInfo";
8 8
9 const AppStackNavigator = createStackNavigator({ 9 const AppStackNavigator = createStackNavigator({
10 Main: { 10 Main: {
11 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록 11 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
12 }, 12 },
13 - Datail:{ 13 + Datail: {
14 screen: Detail 14 screen: Detail
15 } 15 }
16 }); 16 });
......
...@@ -3,92 +3,117 @@ import { ...@@ -3,92 +3,117 @@ import {
3 View, 3 View,
4 Text, 4 Text,
5 StyleSheet, 5 StyleSheet,
6 - Button, 6 + Alert,
7 Image, 7 Image,
8 - TouchableOpacity 8 + TouchableOpacity,
9 + AsyncStorage
9 } from "react-native"; 10 } from "react-native";
10 import { Icon } from "native-base"; 11 import { Icon } from "native-base";
11 -import { Ionicons, AntDesign } from "@expo/vector-icons"; 12 +import { AntDesign } from "@expo/vector-icons";
12 -import { 13 +import { SafeAreaView, ScrollView } from "react-navigation";
13 - NavigationActions,
14 - createStackNavigator,
15 - withNavigation,
16 - SafeAreaView,
17 - ScrollView
18 -} from "react-navigation";
19 import axios from "axios"; 14 import axios from "axios";
20 -import { AsyncStorage } from "react-native"; 15 +import * as API from "../../API_Key.js";
16 +
17 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
21 18
22 export default class Detail extends Component { 19 export default class Detail extends Component {
20 + constructor(props) {
21 + super(props);
22 + this.state = {
23 + key: []
24 + };
25 + }
26 +
23 static navigationOptions = { 27 static navigationOptions = {
24 tabBarIcon: ({ tintColor }) => ( 28 tabBarIcon: ({ tintColor }) => (
25 <Icon name="ios-reorder" style={{ color: tintColor }} /> 29 <Icon name="ios-reorder" style={{ color: tintColor }} />
26 ) 30 )
27 }; 31 };
28 32
29 - state = { 33 + _AllKeys = async () => {
34 + try {
35 + tempKey = await AsyncStorage.getAllKeys();
36 + this.setState({
37 + key: tempKey
38 + });
39 + } catch (error) {}
40 + };
41 +
42 + _onPressButton = async title => {
43 + await this._AllKeys(); // 현재 키 this.state.key 에 초기화
44 + for (var value of this.state.key) {
45 + if (value == title) {
46 + Alert.alert(
47 + "알림",
48 + `즐겨찾기에 있는 영화입니다.`,
49 + [
50 + {
51 + text: "넹"
52 + }
53 + ],
54 + { cancelable: true }
55 + );
56 + return;
57 + }
58 + }
59 +
60 + AsyncStorage.setItem(title, title);
61 +
62 + Alert.alert(
63 + "알림",
64 + `즐겨찾기에 추가되었습니다.`,
65 + [
66 + {
67 + text: "넹"
68 + }
69 + ],
70 + { cancelable: true }
71 + );
72 +
73 + await this._AllKeys();
74 +
75 + var temp = {
30 title: "", 76 title: "",
31 - overview: "", 77 + backdrop_path: ""
32 - release_date: "",
33 - url: "",
34 - back: "",
35 - key: ""
36 }; 78 };
79 + var tempList = [];
80 + currkeys = this.state.key;
37 81
38 - getDB = async search => { 82 + for (let i = 0; i < currkeys.length; i++) {
39 - axios 83 + temp = {
84 + title: "",
85 + backdrop_path: ""
86 + };
87 + temp.title = currkeys[i];
88 + await axios
40 .get( 89 .get(
41 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1` 90 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp.title}&language=ko-KR&page=1`
42 ) 91 )
43 .then(response => { 92 .then(response => {
44 - this.setState({ 93 + temp.backdrop_path = response.data.results[0].backdrop_path;
45 - title: response.data.results[0].title, 94 + tempList.push(temp);
46 - overview: response.data.results[0].overview + "\n\n\n", 95 +
47 - release_date: response.data.results[0].release_date, 96 + if (i == this.state.key.length - 1) {
48 - url: response.data.results[0].poster_path, 97 + this.props.navigation.navigate("WantToWatchTab", {
49 - back: response.data.results[0].backdrop_path 98 + keys: tempList
50 }); 99 });
100 + }
51 }); 101 });
52 - };
53 - getNaverApi = async search => {
54 - fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
55 - headers: {
56 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
57 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
58 } 102 }
59 - })
60 - .then(response => response.json())
61 - .then(json => this.setState({ items: json.items }));
62 - };
63 -
64 - _AllKeys = async () => {
65 - try {
66 - this.state.key = await AsyncStorage.getAllKeys();
67 - console.log(this.state.key);
68 - } catch (error) {}
69 }; 103 };
70 104
71 componentDidMount() { 105 componentDidMount() {
72 this._AllKeys(); 106 this._AllKeys();
73 } 107 }
74 108
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");
86 - }
87 -
88 render() { 109 render() {
89 const { navigation } = this.props; 110 const { navigation } = this.props;
90 - var temp = navigation.getParam("title", ""); 111 + var title = navigation.getParam("title", ""); // title 변수를 전달 받아옴, default 값은 "" 으로 설정
91 - this.getDB(temp); 112 + var overview = navigation.getParam("overview", ""); // overview 변수를 전달 받아옴, default 값은 "" 으로 설정
113 + var release_date = navigation.getParam("release_date", "");
114 + var url = navigation.getParam("url", "");
115 + var back = navigation.getParam("back", "");
116 +
92 return ( 117 return (
93 <SafeAreaView style={styles.container}> 118 <SafeAreaView style={styles.container}>
94 <ScrollView style={styles.container}> 119 <ScrollView style={styles.container}>
...@@ -97,7 +122,7 @@ export default class Detail extends Component { ...@@ -97,7 +122,7 @@ export default class Detail extends Component {
97 <View style={styles.backgroundContainer}> 122 <View style={styles.backgroundContainer}>
98 <Image 123 <Image
99 source={{ 124 source={{
100 - uri: `https://image.tmdb.org/t/p/original${this.state.back}` 125 + uri: `https://image.tmdb.org/t/p/original${back}`
101 }} 126 }}
102 style={styles.posterBack} 127 style={styles.posterBack}
103 /> 128 />
...@@ -105,33 +130,29 @@ export default class Detail extends Component { ...@@ -105,33 +130,29 @@ export default class Detail extends Component {
105 <View style={styles.overlay}> 130 <View style={styles.overlay}>
106 <Image 131 <Image
107 source={{ 132 source={{
108 - uri: `https://image.tmdb.org/t/p/original${this.state.url}` 133 + uri: `https://image.tmdb.org/t/p/original${url}`
109 }} 134 }}
110 style={styles.posterFront} 135 style={styles.posterFront}
111 /> 136 />
112 <View style={styles.posterTitle}> 137 <View style={styles.posterTitle}>
113 - <Text style={styles.Title}>{this.state.title}</Text> 138 + <Text style={styles.Title}>{title}</Text>
114 </View> 139 </View>
115 </View> 140 </View>
116 </View> 141 </View>
117 </View> 142 </View>
118 <View style={styles.container2}> 143 <View style={styles.container2}>
119 <View> 144 <View>
120 - <Text style={styles.name}>{this.state.title}</Text> 145 + <Text style={styles.name}>{title}</Text>
121 </View> 146 </View>
122 <View style={styles.lowContainer}> 147 <View style={styles.lowContainer}>
123 - <Text style={styles.overview}>{this.state.release_date}</Text> 148 + <Text style={styles.overview}>{release_date}</Text>
124 <View style={styles.buttonLayout}> 149 <View style={styles.buttonLayout}>
125 - <TouchableOpacity 150 + <TouchableOpacity onPress={() => this._onPressButton(title)}>
126 - // title="추가 "
127 - onPress={() => this._onPressButton()}
128 - >
129 <AntDesign name="star" color="yellow" style={styles.button} /> 151 <AntDesign name="star" color="yellow" style={styles.button} />
130 </TouchableOpacity> 152 </TouchableOpacity>
131 </View> 153 </View>
132 </View> 154 </View>
133 - <Text style={styles.overview}>{this.state.overview}</Text> 155 + <Text style={styles.overview}>{overview}</Text>
134 - {/* <Text style={styles.overview}>{this.state.url}</Text> */}
135 </View> 156 </View>
136 </ScrollView> 157 </ScrollView>
137 </SafeAreaView> 158 </SafeAreaView>
...@@ -139,8 +160,6 @@ export default class Detail extends Component { ...@@ -139,8 +160,6 @@ export default class Detail extends Component {
139 } 160 }
140 } 161 }
141 162
142 -//export default withNavigation(Detail);
143 -
144 const styles = StyleSheet.create({ 163 const styles = StyleSheet.create({
145 container: { 164 container: {
146 flex: 1, 165 flex: 1,
...@@ -164,10 +183,6 @@ const styles = StyleSheet.create({ ...@@ -164,10 +183,6 @@ const styles = StyleSheet.create({
164 }, 183 },
165 overlay: { 184 overlay: {
166 flexDirection: "row" 185 flexDirection: "row"
167 - // opacity: 0.5,
168 - // backgroundColor: "#000000"
169 - // alignItems: "center",
170 - // justifyContent: "flex-end"
171 }, 186 },
172 posterContainer: { 187 posterContainer: {
173 flex: 1, 188 flex: 1,
...@@ -180,43 +195,25 @@ const styles = StyleSheet.create({ ...@@ -180,43 +195,25 @@ const styles = StyleSheet.create({
180 justifyContent: "flex-end" 195 justifyContent: "flex-end"
181 }, 196 },
182 posterBack: { 197 posterBack: {
183 - // resizeMode: "cover",
184 - // flex: 10,
185 width: "100%", 198 width: "100%",
186 height: "100%" 199 height: "100%"
187 - // marginLeft: 10,
188 - // paddingHorizontal: 50
189 - // alignItems: "stretch",
190 - // alignItems: "center"
191 - // borderRadius: 7
192 }, 200 },
193 posterFront: { 201 posterFront: {
194 - // resizeMode: "cover",
195 - // alignItems: "center",
196 - // justifyContent: "flex-end",
197 - // flex: 10,
198 marginTop: 100, 202 marginTop: 100,
199 marginLeft: 10, 203 marginLeft: 10,
200 marginBottom: 10, 204 marginBottom: 10,
201 width: 120, 205 width: 120,
202 height: 160 206 height: 160
203 - // marginLeft: 10,
204 - // paddingHorizontal: 45,
205 - // alignItems: "stretch",
206 - // borderRadius: 7
207 }, 207 },
208 208
209 buttonLayout: { 209 buttonLayout: {
210 marginLeft: "auto", 210 marginLeft: "auto",
211 marginRight: 20, 211 marginRight: 20,
212 justifyContent: "space-around", 212 justifyContent: "space-around",
213 - // marginBottom: 10,
214 flexDirection: "row" 213 flexDirection: "row"
215 }, 214 },
216 button: { 215 button: {
217 fontSize: 30 216 fontSize: 30
218 - // width: 30,
219 - // height: 30
220 }, 217 },
221 searchContainer: { 218 searchContainer: {
222 backgroundColor: "black", 219 backgroundColor: "black",
...@@ -248,8 +245,6 @@ const styles = StyleSheet.create({ ...@@ -248,8 +245,6 @@ const styles = StyleSheet.create({
248 backgroundColor: "black", 245 backgroundColor: "black",
249 flex: 1, 246 flex: 1,
250 flexDirection: "row" 247 flexDirection: "row"
251 - // justifyContent: "center",
252 - // alignItems: "center"
253 }, 248 },
254 leftContainer: { 249 leftContainer: {
255 flex: 1, 250 flex: 1,
......
This diff is collapsed. Click to expand it.
1 +import React, { Component } from "react";
2 +import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
3 +import { CardItem } from "native-base";
4 +
5 +export default class MyList extends Component {
6 + static defaultProps = {
7 + name: "",
8 + backdrop_path: "",
9 + _onPress: () => null
10 + };
11 +
12 + constructor(props) {
13 + super(props);
14 + }
15 +
16 + render() {
17 + return (
18 + <View style={styles.lowContainer}>
19 + <View style={styles.leftContainer}>
20 + <CardItem style={styles.container}>
21 + {
22 + <TouchableOpacity onPress={this.props._onPress}>
23 + <Image
24 + style={styles.poster}
25 + source={{
26 + uri: `https://image.tmdb.org/t/p/original/${this.props.backdrop_path}`
27 + }}
28 + />
29 + </TouchableOpacity>
30 + }
31 + </CardItem>
32 + </View>
33 + <View style={styles.rightContainer}>
34 + <CardItem style={styles.container}>
35 + <View style={styles.container}>
36 + <TouchableOpacity onPress={this.props._onPress}>
37 + <Text style={styles.textStyle}>{this.props.name}</Text>
38 + </TouchableOpacity>
39 + </View>
40 + </CardItem>
41 + </View>
42 + </View>
43 + );
44 + }
45 +}
46 +
47 +const styles = StyleSheet.create({
48 + container: {
49 + backgroundColor: "black",
50 + flex: 1
51 + },
52 + lowContainer: {
53 + marginLeft: 15,
54 + backgroundColor: "black",
55 + flex: 1,
56 + flexDirection: "row",
57 + justifyContent: "center",
58 + alignItems: "center"
59 + },
60 + leftContainer: {
61 + flex: 1,
62 + backgroundColor: "black",
63 + justifyContent: "center",
64 + alignItems: "center"
65 + },
66 + rightContainer: {
67 + flex: 2,
68 + backgroundColor: "black"
69 + },
70 + poster: {
71 + resizeMode: "cover",
72 + flex: 10,
73 + width: "40%",
74 + height: 80,
75 + paddingHorizontal: 58,
76 + alignItems: "stretch",
77 + borderRadius: 7
78 + },
79 + textStyle: {
80 + fontSize: 16,
81 + color: "white"
82 + }
83 +});
1 +import React, { Component } from "react";
2 +import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
3 +
4 +export default class RankUI extends Component {
5 + static defaultProps = {
6 + name: "",
7 + imgur: "",
8 + overview: "",
9 + _onPress: () => null
10 + };
11 +
12 + constructor(props) {
13 + super(props);
14 + }
15 +
16 + render() {
17 + return (
18 + <View style={style.lowContainer}>
19 + <View style={style.leftContainer}>
20 + <TouchableOpacity onPress={this.props._onPress}>
21 + <Image
22 + style={style.poster}
23 + source={{
24 + uri: `https://image.tmdb.org/t/p/original/${this.props.imgur}`
25 + }}
26 + />
27 + </TouchableOpacity>
28 + </View>
29 + <View style={style.rightContainer}>
30 + <View style={style.rightUpContainer}>
31 + <TouchableOpacity onPress={this.props._onPress}>
32 + <Text style={style.name}>{this.props.name}</Text>
33 + </TouchableOpacity>
34 + </View>
35 + <View style={style.rightDownContainer}>
36 + <TouchableOpacity onPress={this.props._onPress}>
37 + <Text style={style.overview}>
38 + {this.props.overview.length < 60
39 + ? `${this.props.overview}`
40 + : `${this.props.overview.substring(0, 57)}...\n `}
41 + </Text>
42 + </TouchableOpacity>
43 + </View>
44 + </View>
45 + </View>
46 + );
47 + }
48 +}
49 +
50 +const style = StyleSheet.create({
51 + title: {
52 + fontSize: 20,
53 + justifyContent: "center",
54 + alignItems: "center"
55 + },
56 + lowContainer: {
57 + flex: 1,
58 + flexDirection: "row",
59 + justifyContent: "center",
60 + alignItems: "center",
61 + marginLeft: 10,
62 + marginTop: 10,
63 + marginBottom: 20
64 + },
65 + leftContainer: {
66 + flex: 1,
67 + justifyContent: "center",
68 + alignItems: "center"
69 + },
70 + rightContainer: {
71 + flex: 2
72 + },
73 + rightUpContainer: {
74 + flex: 1,
75 + paddingTop: 15,
76 + justifyContent: "center",
77 + marginLeft: 20
78 + },
79 + rightDownContainer: {
80 + flex: 3,
81 + paddingTop: 20,
82 + paddingBottom: 10,
83 + padding: 15
84 + },
85 + poster: {
86 + resizeMode: "cover",
87 + flex: 10,
88 + width: "40%",
89 + height: 40,
90 + paddingHorizontal: 58,
91 + alignItems: "stretch",
92 + borderRadius: 7
93 + },
94 + name: {
95 + fontSize: 16,
96 + color: "white"
97 + },
98 + overview: {
99 + fontSize: 14,
100 + color: "white"
101 + }
102 +});
...@@ -11,10 +11,11 @@ import { ...@@ -11,10 +11,11 @@ import {
11 } from "react-native"; 11 } from "react-native";
12 import { Card, CardItem, Icon } from "native-base"; 12 import { Card, CardItem, Icon } from "native-base";
13 import axios from "axios"; 13 import axios from "axios";
14 +import * as API from "../../API_Key.js";
14 15
15 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 16 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
16 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 17 +const NAVER_CLIENT_ID = API.getNAVER_CLIENT_ID();
17 -const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 18 +const NAVER_CLIENT_SECRET = API.getNAVER_CLIENT_SECRET();
18 19
19 export default class Search extends Component { 20 export default class Search extends Component {
20 static navigationOptions = { 21 static navigationOptions = {
...@@ -61,6 +62,23 @@ export default class Search extends Component { ...@@ -61,6 +62,23 @@ export default class Search extends Component {
61 this.getDB(typing); 62 this.getDB(typing);
62 }; 63 };
63 64
65 + _onPressButton = async temp => {
66 + axios
67 + .get(
68 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
69 + )
70 + .then(response => {
71 + var data = response.data.results[0];
72 + this.props.navigation.navigate("Detail", {
73 + title: data.title,
74 + overview: data.overview + "\n\n\n",
75 + release_date: data.release_date,
76 + url: data.poster_path,
77 + back: data.backdrop_path
78 + });
79 + });
80 + };
81 +
64 render() { 82 render() {
65 console.log("1"); 83 console.log("1");
66 return ( 84 return (
...@@ -94,9 +112,7 @@ export default class Search extends Component { ...@@ -94,9 +112,7 @@ export default class Search extends Component {
94 { 112 {
95 <TouchableOpacity 113 <TouchableOpacity
96 onPress={() => 114 onPress={() =>
97 - this.props.navigation.navigate("Detail", { 115 + this._onPressButton(result.title)
98 - title: result.title
99 - })
100 } 116 }
101 > 117 >
102 <Image 118 <Image
...@@ -111,15 +127,28 @@ export default class Search extends Component { ...@@ -111,15 +127,28 @@ export default class Search extends Component {
111 </View> 127 </View>
112 <View style={styles.rightContainer}> 128 <View style={styles.rightContainer}>
113 <View style={styles.rightUpContainer}> 129 <View style={styles.rightUpContainer}>
130 + <TouchableOpacity
131 + onPress={() => this._onPressButton(result.title)}
132 + >
114 <Text style={styles.name}>{result.title}</Text> 133 <Text style={styles.name}>{result.title}</Text>
134 + </TouchableOpacity>
115 </View> 135 </View>
116 <View style={styles.rightDownContainer}> 136 <View style={styles.rightDownContainer}>
117 <CardItem style={styles.container}> 137 <CardItem style={styles.container}>
138 + <TouchableOpacity
139 + onPress={() =>
140 + this._onPressButton(result.title)
141 + }
142 + >
118 <Text style={styles.overview}> 143 <Text style={styles.overview}>
119 {result.overview.length < 60 144 {result.overview.length < 60
120 ? `${result.overview}` 145 ? `${result.overview}`
121 - : `${result.overview.substring(0, 57)}...\n`} 146 + : `${result.overview.substring(
147 + 0,
148 + 57
149 + )}...\n`}
122 </Text> 150 </Text>
151 + </TouchableOpacity>
123 </CardItem> 152 </CardItem>
124 </View> 153 </View>
125 </View> 154 </View>
......
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, Button } from "react-native";
3 import { Icon } from "native-base"; 3 import { Icon } from "native-base";
4 -import { withNavigation } from 'react-navigation'; 4 +import "react-native-gesture-handler";
5 -import { navigation, StackActions, NavigationActions } from 'react-navigation';
6 -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,13 +14,15 @@ export default class SeenMovieTab extends Component { ...@@ -17,13 +14,15 @@ 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')} /> 17 + <Button
18 + title="hi"
19 + onPress={() => this.props.navigation.navigate("Detail")}
20 + />
21 </View> 21 </View>
22 ); 22 );
23 } 23 }
24 } 24 }
25 25
26 -
27 const style = StyleSheet.create({ 26 const style = StyleSheet.create({
28 container: { 27 container: {
29 backgroundColor: "black", 28 backgroundColor: "black",
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 import { 2 import {
3 StyleSheet, 3 StyleSheet,
4 - Text,
5 View, 4 View,
6 - TouchableOpacity,
7 AsyncStorage, 5 AsyncStorage,
8 SafeAreaView, 6 SafeAreaView,
9 ScrollView, 7 ScrollView,
10 - RefreshControl, 8 + FlatList
11 - Alert,
12 - Image
13 } from "react-native"; 9 } from "react-native";
14 -import { Card, CardItem, Icon } from "native-base"; 10 +import { Icon } from "native-base";
15 import axios from "axios"; 11 import axios from "axios";
16 -import MovieRankingTab from "./MovieRankingTab"; 12 +
17 -import { symbol } from "prop-types"; 13 +import MyList from "./MyList";
18 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 14 +import * as API from "../../API_Key.js";
19 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 15 +
20 -const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 16 +const API_KEY2 = API.getAPI_KEY2(); // 줄거리 받아오기
21 17
22 export default class App extends Component { 18 export default class App extends Component {
19 + static defaultProps = {
20 + title: []
21 + };
22 +
23 + constructor(props) {
24 + super(props);
25 + }
26 +
23 state = { 27 state = {
24 list: [], //영화 제목 list 28 list: [], //영화 제목 list
25 - date: "", //날짜
26 - names: [], // api로 받아오 영화 제목
27 - imgurls: [], //이미지
28 - name0: [], //제목
29 results: [], // json 오브젝트 29 results: [], // json 오브젝트
30 - title: "" 30 + addDate: [],
31 + flag: true
31 }; 32 };
32 33
33 //네비게이션 바 34 //네비게이션 바
...@@ -37,69 +38,33 @@ export default class App extends Component { ...@@ -37,69 +38,33 @@ export default class App extends Component {
37 ) 38 )
38 }; 39 };
39 40
40 - //Data 설정함수 41 + // 로컬스토리지 초기화
42 + _AllKeys = async () => {
43 + try {
44 + tempKey = await AsyncStorage.getAllKeys();
45 + this.setState({
46 + list: tempKey
47 + });
48 + } catch (error) {}
49 + };
50 +
51 + // 초기 스토리지값 불러오기
41 setData = async () => { 52 setData = async () => {
42 try { 53 try {
43 - //요거 바꿔봤다 54 + await this._AllKeys(); // 로컬스토리지에서 this.state.list로 이름 받아오기
44 - // this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다 55 +
45 - // console.log(this.state.list); //잘 뜨는데?? 56 + var length = this.state.list.length;
46 - // const value = await AsyncStorage.getItem("@movieName:key"); 57 + for (let i = 0; i < length; i++) {
47 - // if (value !== null) {
48 - // We have data!!
49 - // await AsyncStorage.getAllKeys().then(console.log);
50 - this.state.list = await AsyncStorage.getAllKeys();
51 - // this.setState({
52 - // name0: this.state.list[0].name
53 - // });
54 - // console.log("확인용", this.state.list);
55 - // var cnt = this.state.list.length;
56 - // console.log(cnt);
57 - // var temp1 = [];
58 - // var temp2 = [];
59 - for (var i = 0; i < this.state.list.length; i++) {
60 axios 58 axios
61 .get( 59 .get(
62 - `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1` 60 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${this.state.list[i]}&language=ko-KR&page=1`
63 ) 61 )
64 .then(response => { 62 .then(response => {
65 - var joined = this.state.imgurls.concat(
66 - response.data.results[0].poster_path
67 - );
68 - // var joined = response.data.results[0].poster_path;
69 - // var name = response.data.results[0].title;
70 - // var name = this.state.list.concat(response.data.results[0].title);
71 - // temp1.push(joined);
72 - // temp2.push(name);
73 - // var temp = this.state.list.concat(response.data.results[0].title);
74 var result = this.state.results.concat(response.data.results[0]); 63 var result = this.state.results.concat(response.data.results[0]);
75 -
76 - // var temp = [joined, name];
77 - // var tempObj = this.state.results.concat(temp);
78 - // this.setState({ imgurls: joined, names: name, results: tempObj });
79 this.setState({ 64 this.setState({
80 - imgurls: joined,
81 results: result 65 results: result
82 - // results: [this.state.list, imgurls]
83 }); 66 });
84 - console.log("list", this.state.list);
85 - console.log("imgurls", this.state.imgurls);
86 - // console.log("results", this.state.imgurls);
87 - // var temp = [];
88 - // console.log(newobj);
89 - // console.log(joined);
90 - // console.log(response.data.results[0].title);
91 - // console.log(response.data.results[0].poster_path);
92 - // console.log(response.data.results);
93 }); 67 });
94 - // var newobj = [temp1, temp2];
95 - // this.setState({ results: newobj });
96 - // console.log(newobj);
97 -
98 - // var a = [1, 3, 4];
99 - // var b = [3, 4, 5];
100 - // var newobj = [a, b];
101 - // var newobj = [...this.state.imgurls, ...this.state.names];
102 - // console.log(newobj);
103 } 68 }
104 } catch (error) { 69 } catch (error) {
105 alert(error); 70 alert(error);
...@@ -108,51 +73,78 @@ export default class App extends Component { ...@@ -108,51 +73,78 @@ export default class App extends Component {
108 73
109 componentDidMount() { 74 componentDidMount() {
110 this.setData(); 75 this.setData();
111 - // var cnt = this.state.list.length; 76 + }
112 - // console.log(cnt); 77 +
113 - // this.getDB(); 78 + // 해당 영화에 detail로 이동
79 + _onPressButton = async temp => {
80 + axios
81 + .get(
82 + `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY2}&query=${temp}&language=ko-KR&page=1`
83 + )
84 + .then(response => {
85 + var data = response.data.results[0];
86 + this.props.navigation.navigate("Detail", {
87 + title: data.title,
88 + overview: data.overview + "\n\n\n",
89 + release_date: data.release_date,
90 + url: data.poster_path,
91 + back: data.backdrop_path
92 + });
93 + });
94 + };
95 +
96 + // props를 받아온 후 (새로운 데이터 추가된 후) 부터는 초기화면으로 안 감
97 + componentWillReceiveProps() {
98 + this.setState({
99 + flag: false
100 + });
114 } 101 }
115 102
116 render() { 103 render() {
104 + //AsyncStorage.clear();
105 +
106 + const { navigation } = this.props;
107 + var addlist = navigation.getParam("keys", ""); // 새로 넘겨 받은 리스트
108 +
109 + const { flag } = this.state;
117 return ( 110 return (
118 <View style={styles.container}> 111 <View style={styles.container}>
119 - {/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */} 112 + <SafeAreaView>
120 - <SafeAreaView style={styles.container}> 113 + <ScrollView>
121 - <ScrollView style={styles.container}> 114 + <View>
122 - <View style={styles.container}> 115 + {flag === true ? (
123 - {/* <Card> */} 116 + <FlatList
124 - {this.state.results.map(item => ( 117 + data={this.state.results}
125 - <View style={styles.lowContainer}> 118 + renderItem={({ item }) => {
126 - <View style={styles.leftContainer}> 119 + return (
127 - <CardItem style={styles.container}> 120 + <MyList
128 - { 121 + name={item.title}
129 - <TouchableOpacity 122 + backdrop_path={item.backdrop_path}
130 - onPress={() => 123 + _onPress={this._onPressButton.bind(
131 - this.props.navigation.navigate("Detail", { 124 + this,
132 - title: item.title 125 + `${item.title}`
133 - }) 126 + )}
134 - } 127 + />
135 - > 128 + );
136 - <Image
137 - style={styles.poster}
138 - source={{
139 - uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
140 }} 129 }}
141 /> 130 />
142 - </TouchableOpacity> 131 + ) : (
143 - } 132 + <FlatList
144 - </CardItem> 133 + data={addlist}
145 - </View> 134 + renderItem={({ item }) => {
146 - <View style={styles.rightContainer}> 135 + return (
147 - <CardItem style={styles.container}> 136 + <MyList
148 - <View style={styles.container}> 137 + name={item.title}
149 - <Text style={styles.textStyle}>{item.title}</Text> 138 + backdrop_path={item.backdrop_path}
150 - </View> 139 + _onPress={this._onPressButton.bind(
151 - </CardItem> 140 + this,
152 - </View> 141 + `${item.title}`
153 - </View> 142 + )}
154 - ))} 143 + />
155 - {/* </Card> */} 144 + );
145 + }}
146 + />
147 + )}
156 </View> 148 </View>
157 </ScrollView> 149 </ScrollView>
158 </SafeAreaView> 150 </SafeAreaView>
...@@ -165,54 +157,5 @@ const styles = StyleSheet.create({ ...@@ -165,54 +157,5 @@ const styles = StyleSheet.create({
165 container: { 157 container: {
166 backgroundColor: "black", 158 backgroundColor: "black",
167 flex: 1 159 flex: 1
168 - // alignItems: "center",
169 - // justifyContent: "center"
170 - },
171 - lowContainer: {
172 - marginLeft: 15,
173 - backgroundColor: "black",
174 - flex: 1,
175 - flexDirection: "row",
176 - justifyContent: "center",
177 - alignItems: "center"
178 - },
179 - leftContainer: {
180 - flex: 1,
181 - backgroundColor: "black",
182 - justifyContent: "center",
183 - alignItems: "center"
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 - },
201 - poster: {
202 - resizeMode: "cover",
203 - flex: 10,
204 - width: "40%",
205 - height: 80,
206 - paddingHorizontal: 58,
207 - alignItems: "stretch",
208 - borderRadius: 7
209 - },
210 - textStyle: {
211 - fontSize: 16,
212 - color: "white"
213 - },
214 - overview: {
215 - fontSize: 14,
216 - color: "white"
217 } 160 }
218 }); 161 });
......
1 import React, { Component } from "react"; 1 import React, { Component } from "react";
2 -import { StyleSheet, Text, View, Button } from "react-native"; 2 +import { StyleSheet } 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 MovieRankingTab from "./AppTabNavigator/MovieRankingTab";
7 -import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; 6 +import WantToWatchTab from "./AppTabNavigator/WantToWatchTab";
8 -import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
9 import Search from ".//AppTabNavigator/Search"; 7 import Search from ".//AppTabNavigator/Search";
10 import Detail from "./AppTabNavigator/Detail"; 8 import Detail from "./AppTabNavigator/Detail";
11 import { Platform } from "react-native"; 9 import { Platform } from "react-native";
12 -import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
13 10
14 const AppTabNavigator = createMaterialTopTabNavigator( 11 const AppTabNavigator = createMaterialTopTabNavigator(
15 { 12 {
16 - SeenMovieTab: { screen: SeenMovieTab },
17 MovieRankingTab: { screen: MovieRankingTab }, 13 MovieRankingTab: { screen: MovieRankingTab },
18 WantToWatchTab: { screen: WantToWatchTab }, 14 WantToWatchTab: { screen: WantToWatchTab },
15 + //SeenMovieTab: { screen: SeenMovieTab },
19 Search: { screen: Search }, 16 Search: { screen: Search },
20 Detail: { screen: Detail } 17 Detail: { screen: Detail }
21 }, 18 },
...@@ -48,7 +45,7 @@ export default class MainScreen extends Component { ...@@ -48,7 +45,7 @@ export default class MainScreen extends Component {
48 // navigationOptions 코드 추가 45 // navigationOptions 코드 추가
49 static navigationOptions = { 46 static navigationOptions = {
50 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 47 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
51 - title: " Poket Movie", 48 + title: " Pocket Movie",
52 headerStyle: { 49 headerStyle: {
53 backgroundColor: "black" 50 backgroundColor: "black"
54 }, 51 },
......
1 -import React from "react";
2 -import { StyleSheet, Text, View, StatusBar } from "react-native";
3 -
4 -export default function Loading() {
5 - return (
6 - <View style={styles.container}>
7 - <StatusBar barStyle="dark-content" />
8 - <Text style={styles.text}>Getting the current weather</Text>
9 - </View>
10 - );
11 -}
12 -
13 -const styles = StyleSheet.create({
14 - container: {
15 - flex: 1,
16 - justifyContent: "flex-end",
17 - paddingHorizontal: 30,
18 - paddingVertical: 100,
19 - backgroundColor: "#FDF6AA"
20 - },
21 - text: {
22 - color: "#2c2c2c",
23 - fontSize: 30
24 - }
25 -});
...@@ -18,7 +18,12 @@ ...@@ -18,7 +18,12 @@
18 }, 18 },
19 "assetBundlePatterns": ["**/*"], 19 "assetBundlePatterns": ["**/*"],
20 "ios": { 20 "ios": {
21 + "bundleIdentifier": "com.hj.pocketMovie",
21 "supportsTablet": true 22 "supportsTablet": true
22 - } 23 + },
24 + "android": {
25 + "package": "com.hj.pocketMovie"
26 + },
27 + "description": ""
23 } 28 }
24 } 29 }
......

7.01 KB | W: | H:

15.2 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", 22 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
23 "react-native-axios": "^0.17.1", 23 "react-native-axios": "^0.17.1",
24 "react-native-elements": "^1.2.7", 24 "react-native-elements": "^1.2.7",
25 - "react-native-gesture-handler": "^1.5.2", 25 + "react-native-gesture-handler": "~1.3.0",
26 "react-native-reanimated": "~1.2.0", 26 "react-native-reanimated": "~1.2.0",
27 "react-native-screens": "~1.0.0-alpha.23", 27 "react-native-screens": "~1.0.0-alpha.23",
28 "react-native-stack": "^1.0.0-alpha11", 28 "react-native-stack": "^1.0.0-alpha11",
...@@ -36,5 +36,5 @@ ...@@ -36,5 +36,5 @@
36 "babel-preset-expo": "^7.1.0" 36 "babel-preset-expo": "^7.1.0"
37 }, 37 },
38 "private": true, 38 "private": true,
39 - "version": "0.0.0" 39 + "version": "1.0.0"
40 } 40 }
......
No preview for this file type
...@@ -2726,11 +2726,6 @@ growly@^1.3.0: ...@@ -2726,11 +2726,6 @@ growly@^1.3.0:
2726 resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" 2726 resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
2727 integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE= 2727 integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
2728 2728
2729 -hammerjs@^2.0.8:
2730 - version "2.0.8"
2731 - resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
2732 - integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
2733 -
2734 har-schema@^2.0.0: 2729 har-schema@^2.0.0:
2735 version "2.0.0" 2730 version "2.0.0"
2736 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" 2731 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
...@@ -4716,15 +4711,14 @@ react-native-elements@^1.2.7: ...@@ -4716,15 +4711,14 @@ react-native-elements@^1.2.7:
4716 react-native-ratings "^6.3.0" 4711 react-native-ratings "^6.3.0"
4717 react-native-status-bar-height "^2.2.0" 4712 react-native-status-bar-height "^2.2.0"
4718 4713
4719 -react-native-gesture-handler@^1.5.2: 4714 +react-native-gesture-handler@~1.3.0:
4720 - version "1.5.2" 4715 + version "1.3.0"
4721 - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz#281111550bf1eee10b7feba5278d142169892731" 4716 + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
4722 - integrity sha512-Xp03dq4XYVTD0xmWx4DW4eX+ox1NQLjHmbykspTdS5FCNIVIOekVXRLFCw1698/v8dYUHApNo6K3s3BCD8fqPA== 4717 + integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
4723 dependencies: 4718 dependencies:
4724 - hammerjs "^2.0.8"
4725 hoist-non-react-statics "^2.3.1" 4719 hoist-non-react-statics "^2.3.1"
4726 - invariant "^2.2.4" 4720 + invariant "^2.2.2"
4727 - prop-types "^15.7.2" 4721 + prop-types "^15.5.10"
4728 4722
4729 react-native-iphone-x-helper@^1.0.3: 4723 react-native-iphone-x-helper@^1.0.3:
4730 version "1.2.1" 4724 version "1.2.1"
......
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