신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
신승민
997b12fd 1 parent e01b535c

Search UI and Poster

Inline Side-by-side
Showing 3 changed files with 400 additions and 35 deletions
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 -import { View, Text, StyleSheet, Image} from 'react-native'; 2 +import { View, Text, StyleSheet, Image } from "react-native";
3 -import { Icon } from 'native-base'; 3 +import { Icon } from "native-base";
4 import { AsyncStorage } from "react-native"; 4 import { AsyncStorage } from "react-native";
5 import axios from "axios"; 5 import axios from "axios";
6 -
7 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 6 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
8 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 7 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
9 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 8 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
10 - 9 +let uri1 = "";
11 10
12 export default class MovieRankingTab extends Component { 11 export default class MovieRankingTab extends Component {
12 + state = {
13 + isLoading: true,
14 + info: [],
15 + name0: [],
16 + name1: [],
17 + name2: [],
18 + name3: [],
19 + name4: [],
20 + name5: [],
21 + name6: [],
22 + name7: [],
23 + name8: [],
24 + name9: [],
25 + imgur0: [],
26 + imgurl: [],
27 + imgur2: [],
28 + imgur3: [],
29 + imgur4: [],
30 + imgur5: [],
31 + imgur6: [],
32 + imgur7: [],
33 + imgur8: [],
34 + imgur9: []
35 + };
13 static navigationOptions = { 36 static navigationOptions = {
14 tabBarIcon: ({ tintColor }) => ( 37 tabBarIcon: ({ tintColor }) => (
15 - <Icon name='ios-trophy' style={{ color: tintColor }} /> 38 + <Icon name="ios-trophy" style={{ color: tintColor }} />
16 ) 39 )
17 }; 40 };
18 41
19 - getNaverApi = async () => { 42 + getMovieList = async () => {
20 - fetch("https://openapi.naver.com/v1/search/movie.json?query='겨울왕국 2'", { 43 + axios
44 + .get(
45 + `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
46 + )
47 + .then(
48 + response => {
49 + this.setState({
50 + name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
51 + name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
52 + name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
53 + name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
54 + name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
55 + name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
56 + name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
57 + name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
58 + name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
59 + name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
60 + info: response.data.boxOfficeResult.dailyBoxOfficeList
61 + });
62 +
63 + name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
64 + fetch(
65 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
66 + {
21 headers: { 67 headers: {
22 "X-Naver-Client-Id": NAVER_CLIENT_ID, 68 "X-Naver-Client-Id": NAVER_CLIENT_ID,
23 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 69 "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
24 } 70 }
25 - }) 71 + }
72 + )
26 .then(response => response.json()) 73 .then(response => response.json())
27 .then(json => { 74 .then(json => {
28 - console.log(json.items[0].image); 75 + this.setState({
76 + imgurl0: json.items[0].image
29 }); 77 });
30 - }; 78 + });
31 - getMovieList = async () => { 79 + name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
32 - axios 80 + fetch(
33 - .get( 81 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
34 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129` 82 + {
83 + headers: {
84 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
85 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
86 + }
87 + }
35 ) 88 )
36 - .then(response => { 89 + .then(response => response.json())
37 - for (var i = 0; i < 10; i++) { 90 + .then(json => {
38 - console.log( 91 + this.setState({
39 - response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm 92 + imgurl1: json.items[0].image
40 - ); 93 + });
94 + });
95 + name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
96 + fetch(
97 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
98 + {
99 + headers: {
100 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
101 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
102 + }
103 + }
104 + )
105 + .then(response => response.json())
106 + .then(json => {
107 + this.setState({
108 + imgurl2: json.items[0].image
109 + });
110 + });
111 + name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
112 + fetch(
113 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
114 + {
115 + headers: {
116 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
117 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
118 + }
119 + }
120 + )
121 + .then(response => response.json())
122 + .then(json => {
123 + this.setState({
124 + imgurl3: json.items[0].image
125 + });
126 + });
127 + name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
128 + fetch(
129 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
130 + {
131 + headers: {
132 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
133 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
134 + }
135 + }
136 + )
137 + .then(response => response.json())
138 + .then(json => {
139 + this.setState({
140 + imgurl4: json.items[0].image
141 + });
142 + });
143 + name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
144 + fetch(
145 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
146 + {
147 + headers: {
148 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
149 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
150 + }
151 + }
152 + )
153 + .then(response => response.json())
154 + .then(json => {
155 + this.setState({
156 + imgurl5: json.items[0].image
157 + });
158 + });
159 + name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
160 + fetch(
161 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
162 + {
163 + headers: {
164 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
165 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
166 + }
167 + }
168 + )
169 + .then(response => response.json())
170 + .then(json => {
171 + this.setState({
172 + imgurl6: json.items[0].image
173 + });
174 + });
175 + name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
176 + fetch(
177 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
178 + {
179 + headers: {
180 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
181 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
182 + }
183 + }
184 + )
185 + .then(response => response.json())
186 + .then(json => {
187 + this.setState({
188 + imgurl7: json.items[0].image
189 + });
190 + });
191 + name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
192 + fetch(
193 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
194 + {
195 + headers: {
196 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
197 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
198 + }
199 + }
200 + )
201 + .then(response => response.json())
202 + .then(json => {
203 + this.setState({
204 + imgurl8: json.items[0].image
205 + });
206 + });
207 + name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
208 + fetch(
209 + `https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
210 + {
211 + headers: {
212 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
213 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
214 + }
215 + }
216 + )
217 + .then(response => response.json())
218 + .then(json => {
219 + this.setState({
220 + imgurl9: json.items[0].image
221 + });
222 + });
41 } 223 }
42 - }) 224 + // {
225 + // for (var i = 0; i < 10; i++) {
226 + // console.log(
227 + // response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
228 + // );
229 + // }
230 + // }
231 + )
43 .catch(error => { 232 .catch(error => {
44 console.log(error); 233 console.log(error);
45 }); 234 });
46 }; 235 };
47 componentDidMount() { 236 componentDidMount() {
48 this.getMovieList(); 237 this.getMovieList();
49 - this.getNaverApi();
50 } 238 }
51 -
52 render() { 239 render() {
53 return ( 240 return (
54 <View style={style.container}> 241 <View style={style.container}>
55 <Text>MovieRanking</Text> 242 <Text>MovieRanking</Text>
56 <Image 243 <Image
57 - style = {{height:'25%',width: '25%'}} 244 + style={{ height: "25%", width: "25%" }}
58 - source={{uri : "https://ssl.pstatic.net/imgmovie/mdi/mit110/1368/136873_P18_100537.jpg" }}/> 245 + source={{ uri: `${this.state.imgurl0}` }}
246 + />
247 + <Text>{this.state.name0}</Text>
248 + <Image
249 + style={{ height: "25%", width: "25%" }}
250 + source={{ uri: `${this.state.imgurl1}` }}
251 + />
252 + <Text>{this.state.name1}</Text>
253 + <Image
254 + style={{ height: "25%", width: "25%" }}
255 + source={{ uri: `${this.state.imgurl2}` }}
256 + />
257 + <Text>{this.state.name2}</Text>
258 + <Image
259 + style={{ height: "25%", width: "25%" }}
260 + source={{ uri: `${this.state.imgurl3}` }}
261 + />
262 + <Text>{this.state.name3}</Text>
263 + <Image
264 + style={{ height: "25%", width: "25%" }}
265 + source={{ uri: `${this.state.imgurl4}` }}
266 + />
267 + <Text>{this.state.name4}</Text>
268 + <Image
269 + style={{ height: "25%", width: "25%" }}
270 + source={{ uri: `${this.state.imgurl5}` }}
271 + />
272 + <Text>{this.state.name5}</Text>
273 + <Image
274 + style={{ height: "25%", width: "25%" }}
275 + source={{ uri: `${this.state.imgurl6}` }}
276 + />
277 + <Text>{this.state.name6}</Text>
278 + <Image
279 + style={{ height: "25%", width: "25%" }}
280 + source={{ uri: `${this.state.imgurl7}` }}
281 + />
282 + <Text>{this.state.name7}</Text>
283 + <Image
284 + style={{ height: "25%", width: "25%" }}
285 + source={{ uri: `${this.state.imgurl8}` }}
286 + />
287 + <Text>{this.state.name8}</Text>
288 + <Image
289 + style={{ height: "25%", width: "25%" }}
290 + source={{ uri: `${this.state.imgurl9}` }}
291 + />
292 + <Image
293 + style={{ height: "25%", width: "25%" }}
294 + source={{ uri: `${this.state.imgurl9}` }}
295 + />
296 + <Text>{this.state.name9}</Text>
59 </View> 297 </View>
60 ); 298 );
61 } 299 }
...@@ -64,7 +302,10 @@ export default class MovieRankingTab extends Component { ...@@ -64,7 +302,10 @@ export default class MovieRankingTab extends Component {
64 const style = StyleSheet.create({ 302 const style = StyleSheet.create({
65 container: { 303 container: {
66 flex: 1, 304 flex: 1,
67 - alignItems: 'center', 305 + alignItems: "center",
68 - justifyContent: 'center', 306 + justifyContent: "center"
307 + },
308 + splitContainer: {
309 + flex: 1
69 } 310 }
70 }); 311 });
...\ No newline at end of file ...\ No newline at end of file
......
1 +import React, { Component } from 'react';
2 +import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
3 +import { Icon } from 'native-base';
4 +import axios from "axios";
5 +import { AsyncStorage } from "react-native";
6 +
7 +const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
8 +const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
9 +const NAVER_CLIENT_SECRET = "0GRb3uya1U";
10 +
11 +export default class Search extends Component {
12 + static navigationOptions = {
13 + tabBarIcon: ({ tintColor }) => (
14 + <Icon name='ios-search' style={{ color: tintColor }} />
15 + )
16 + }
17 +
18 + state = {
19 + movieName: "",
20 + imgurl: []
21 + };
22 +/*
23 + getNaverApi = async () => {
24 + fetch(`https://openapi.naver.com/v1/search/movie.json?query=${this.state.movieName}`, {
25 + headers: {
26 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
27 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
28 + }
29 + })
30 + .then(response => response.json())
31 + .then(json => {
32 + this.setState({
33 + imgurl: json.items[0].image
34 + });
35 + });
36 + getMovieList = async () => {
37 + axios
38 + .get(
39 + `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
40 + )
41 + .then(response => {
42 + for (var i = 0; i < 10; i++) {
43 + console.log(
44 + response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
45 + );
46 + }
47 + })
48 + .catch(error => {
49 + console.log(error);
50 + });
51 + };
52 + }
53 + componentDidMount() {
54 + this.getNaverApi();
55 + }
56 +*/
57 + addinput = () => {
58 + this.setState(
59 +
60 + )
61 + }
62 +
63 + handleSearchUpdate = text => {
64 + this.setState({
65 + searchTerm: text
66 + });
67 + };
68 +
69 +
70 + render() {
71 + return (
72 + <View style={styles.container}>
73 + <View style={styles.input}>
74 + <TextInput
75 + style={styles.inputText}
76 + placeholder='Search'
77 + autoCorrect={ false }
78 + value = {this.state.movieName}
79 + onChangeText= { (movieName) => this.setState({movieName})}
80 + />
81 + <TouchableOpacity on PressOut = {this.add}>
82 + <Icon name='ios-search'/>
83 + </TouchableOpacity>
84 +
85 + </View>
86 + <Text>
87 + {this.state.imgurl}
88 + </Text>
89 + </View>
90 + )
91 + }
92 + controlMovie = text => {
93 + this.setState({
94 + movieName: text
95 + });
96 + }
97 +}
98 +
99 +const styles = StyleSheet.create({
100 + container: {
101 + marginLeft: 50,
102 + marginRight: 50,
103 + },
104 + input: {
105 + borderRadius: 10,
106 + backgroundColor: "#FFF",
107 + paddingLeft: 10,
108 + paddingRight: 10,
109 + height: 50,
110 + alignItems: "center",
111 + flexDirection: 'row',
112 + justifyContent: 'space-between',
113 + borderBottomColor: "#bbb",
114 + borderBottomWidth: StyleSheet.hairlineWidth,
115 + },
116 + inputText: {
117 + flex: 1,
118 + },
119 + addBtn: {
120 + color: '#4169E1'
121 + }
122 +});
...\ 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 } from 'react-native'; 2 +import { StyleSheet, Text, View, Button } from 'react-native';
3 import { Icon } from 'native-base'; // 추가된 코드 3 import { Icon } from 'native-base'; // 추가된 코드
4 import { createAppContainer } from 'react-navigation'; 4 import { createAppContainer } from 'react-navigation';
5 import { createMaterialTopTabNavigator } from 'react-navigation-tabs'; 5 import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
6 import SeenMovieTab from './AppTabNavigator/MovieRankingTab'; 6 import SeenMovieTab from './AppTabNavigator/MovieRankingTab';
7 import MovieRankingTab from './AppTabNavigator/WantToWatchTab'; 7 import MovieRankingTab from './AppTabNavigator/WantToWatchTab';
8 import WantToWatchTab from './AppTabNavigator/SeenMovieTab'; 8 import WantToWatchTab from './AppTabNavigator/SeenMovieTab';
9 +import Search from './/AppTabNavigator/Search';
9 import { Platform } from 'react-native' 10 import { Platform } from 'react-native'
10 //import { Ionicons } from '@expo/vector-icons'; 11 //import { Ionicons } from '@expo/vector-icons';
11 12
12 13
13 const AppTabNavigator = createMaterialTopTabNavigator({ 14 const AppTabNavigator = createMaterialTopTabNavigator({
14 - "SeenMovieTab":{ screen: SeenMovieTab }, 15 + SeenMovieTab:{ screen: SeenMovieTab },
15 - "MovieRankingTab":{ screen: MovieRankingTab }, 16 + MovieRankingTab:{ screen: MovieRankingTab },
16 - "WantToWatchTab":{ screen: WantToWatchTab } 17 + WantToWatchTab:{ screen: WantToWatchTab },
18 + Search: { screen: Search }
17 }, { 19 }, {
18 animationEnabled: true, 20 animationEnabled: true,
19 swipeEnabled: true, 21 swipeEnabled: true,
...@@ -41,9 +43,9 @@ export default class MainScreen extends Component { ...@@ -41,9 +43,9 @@ export default class MainScreen extends Component {
41 // navigationOptions 코드 추가 43 // navigationOptions 코드 추가
42 static navigationOptions = { 44 static navigationOptions = {
43 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 45 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
44 - title: 'PoketMovie', 46 + title: 'PoketMovie'
45 - headerRight: <Icon name='ios-search' style={{ paddingRight:10 }}/>, 47 +
46 - } 48 +}
47 49
48 render() { 50 render() {
49 return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다. 51 return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
...@@ -55,5 +57,5 @@ const styles = StyleSheet.create({ ...@@ -55,5 +57,5 @@ const styles = StyleSheet.create({
55 flex: 1, 57 flex: 1,
56 alignItems: 'center', 58 alignItems: 'center',
57 justifyContent: 'center', 59 justifyContent: 'center',
58 - }, 60 + }
59 }); 61 });
...\ No newline at end of file ...\ No newline at end of file
......