신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
0827932f 1 parent f8ebc8d2

Edit GUI

Inline Side-by-side
Showing 8 changed files with 364 additions and 101 deletions
...@@ -42,7 +42,15 @@ export default class MovieRankingTab extends Component { ...@@ -42,7 +42,15 @@ export default class MovieRankingTab extends Component {
42 imgur8: [], 42 imgur8: [],
43 imgur9: [], 43 imgur9: [],
44 overview0: [], 44 overview0: [],
45 - overview1: [] 45 + overview1: [],
46 + overview2: [],
47 + overview3: [],
48 + overview4: [],
49 + overview5: [],
50 + overview6: [],
51 + overview7: [],
52 + overview8: [],
53 + overview9: []
46 }; 54 };
47 static navigationOptions = { 55 static navigationOptions = {
48 tabBarIcon: ({ tintColor }) => ( 56 tabBarIcon: ({ tintColor }) => (
...@@ -100,7 +108,10 @@ export default class MovieRankingTab extends Component { ...@@ -100,7 +108,10 @@ export default class MovieRankingTab extends Component {
100 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 108 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
101 ) 109 )
102 .then(response => { 110 .then(response => {
103 - this.setState({ imgurl2: response.data.results[0].poster_path }); 111 + this.setState({
112 + imgurl2: response.data.results[0].poster_path,
113 + overview2: response.data.results[0].overview
114 + });
104 }); 115 });
105 name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm; 116 name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
106 axios 117 axios
...@@ -108,7 +119,10 @@ export default class MovieRankingTab extends Component { ...@@ -108,7 +119,10 @@ export default class MovieRankingTab extends Component {
108 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 119 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
109 ) 120 )
110 .then(response => { 121 .then(response => {
111 - this.setState({ imgurl3: response.data.results[0].poster_path }); 122 + this.setState({
123 + imgurl3: response.data.results[0].poster_path,
124 + overview3: response.data.results[0].overview
125 + });
112 }); 126 });
113 name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm; 127 name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
114 axios 128 axios
...@@ -116,7 +130,10 @@ export default class MovieRankingTab extends Component { ...@@ -116,7 +130,10 @@ export default class MovieRankingTab extends Component {
116 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 130 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
117 ) 131 )
118 .then(response => { 132 .then(response => {
119 - this.setState({ imgurl4: response.data.results[0].poster_path }); 133 + this.setState({
134 + imgurl4: response.data.results[0].poster_path,
135 + overview4: response.data.results[0].overview
136 + });
120 }); 137 });
121 name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm; 138 name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
122 axios 139 axios
...@@ -124,7 +141,10 @@ export default class MovieRankingTab extends Component { ...@@ -124,7 +141,10 @@ export default class MovieRankingTab extends Component {
124 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 141 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
125 ) 142 )
126 .then(response => { 143 .then(response => {
127 - this.setState({ imgurl5: response.data.results[0].poster_path }); 144 + this.setState({
145 + imgurl5: response.data.results[0].poster_path,
146 + overview5: response.data.results[0].overview
147 + });
128 }); 148 });
129 name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm; 149 name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
130 axios 150 axios
...@@ -132,7 +152,10 @@ export default class MovieRankingTab extends Component { ...@@ -132,7 +152,10 @@ export default class MovieRankingTab extends Component {
132 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 152 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
133 ) 153 )
134 .then(response => { 154 .then(response => {
135 - this.setState({ imgurl6: response.data.results[0].poster_path }); 155 + this.setState({
156 + imgurl6: response.data.results[0].poster_path,
157 + overview6: response.data.results[0].overview
158 + });
136 }); 159 });
137 name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm; 160 name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
138 axios 161 axios
...@@ -140,7 +163,10 @@ export default class MovieRankingTab extends Component { ...@@ -140,7 +163,10 @@ export default class MovieRankingTab extends Component {
140 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 163 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
141 ) 164 )
142 .then(response => { 165 .then(response => {
143 - this.setState({ imgurl7: response.data.results[0].poster_path }); 166 + this.setState({
167 + imgurl7: response.data.results[0].poster_path,
168 + overview7: response.data.results[0].overview
169 + });
144 }); 170 });
145 name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm; 171 name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
146 axios 172 axios
...@@ -148,7 +174,10 @@ export default class MovieRankingTab extends Component { ...@@ -148,7 +174,10 @@ export default class MovieRankingTab extends Component {
148 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 174 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
149 ) 175 )
150 .then(response => { 176 .then(response => {
151 - this.setState({ imgurl8: response.data.results[0].poster_path }); 177 + this.setState({
178 + imgurl8: response.data.results[0].poster_path,
179 + overview8: response.data.results[0].overview
180 + });
152 }); 181 });
153 name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm; 182 name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
154 axios 183 axios
...@@ -156,7 +185,10 @@ export default class MovieRankingTab extends Component { ...@@ -156,7 +185,10 @@ export default class MovieRankingTab extends Component {
156 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1` 185 `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
157 ) 186 )
158 .then(response => { 187 .then(response => {
159 - this.setState({ imgurl9: response.data.results[0].poster_path }); 188 + this.setState({
189 + imgurl9: response.data.results[0].poster_path,
190 + overview9: response.data.results[0].overview
191 + });
160 }); 192 });
161 }) 193 })
162 .catch(error => { 194 .catch(error => {
...@@ -176,12 +208,15 @@ export default class MovieRankingTab extends Component { ...@@ -176,12 +208,15 @@ export default class MovieRankingTab extends Component {
176 this.getMovieList(date); 208 this.getMovieList(date);
177 } 209 }
178 _onPressButton(temp) { 210 _onPressButton(temp) {
179 - Alert.alert(temp); 211 + Alert.alert(temp); //메시지 띄우고
212 + console.log(temp); //콘솔에 log 띄운다
213 + AsyncStorage.setItem("MovieLists", temp); //DB에 저장한다
180 } 214 }
181 render() { 215 render() {
182 return ( 216 return (
183 <SafeAreaView style={style.container}> 217 <SafeAreaView style={style.container}>
184 <ScrollView style={style.scrollView}> 218 <ScrollView style={style.scrollView}>
219 + {/* ----- 1위 ----- */}
185 <View style={style.lowContainer}> 220 <View style={style.lowContainer}>
186 <View style={style.leftContainer}> 221 <View style={style.leftContainer}>
187 <TouchableOpacity 222 <TouchableOpacity
...@@ -197,17 +232,33 @@ export default class MovieRankingTab extends Component { ...@@ -197,17 +232,33 @@ export default class MovieRankingTab extends Component {
197 </View> 232 </View>
198 <View style={style.rightContainer}> 233 <View style={style.rightContainer}>
199 <View style={style.rightUpContainer}> 234 <View style={style.rightUpContainer}>
235 + <TouchableOpacity
236 + onPress={this._onPressButton.bind(
237 + this,
238 + `${this.state.name0}`
239 + )}
240 + >
200 <Text style={style.name}>{this.state.name0}</Text> 241 <Text style={style.name}>{this.state.name0}</Text>
242 + </TouchableOpacity>
201 </View> 243 </View>
202 <View style={style.rightDownContainer}> 244 <View style={style.rightDownContainer}>
203 - <Text> 245 + <TouchableOpacity
204 - {this.state.overview0.length < 60 246 + onPress={this._onPressButton.bind(
247 + this,
248 + `${this.state.name0}`
249 + )}
250 + >
251 + <Text style={style.overview}>
252 + {this.state.overview0.length < 70
205 ? `${this.state.overview0}` 253 ? `${this.state.overview0}`
206 - : `${this.state.overview0.substring(0, 57)}...`} 254 + : `${this.state.overview0.substring(0, 65)}...\n `}
207 </Text> 255 </Text>
256 + </TouchableOpacity>
208 </View> 257 </View>
209 </View> 258 </View>
210 </View> 259 </View>
260 +
261 + {/* ----- 2위 ----- */}
211 <View style={style.lowContainer}> 262 <View style={style.lowContainer}>
212 <View style={style.leftContainer}> 263 <View style={style.leftContainer}>
213 <TouchableOpacity 264 <TouchableOpacity
...@@ -223,93 +274,273 @@ export default class MovieRankingTab extends Component { ...@@ -223,93 +274,273 @@ export default class MovieRankingTab extends Component {
223 </View> 274 </View>
224 <View style={style.rightContainer}> 275 <View style={style.rightContainer}>
225 <View style={style.rightUpContainer}> 276 <View style={style.rightUpContainer}>
277 + <TouchableOpacity
278 + onPress={this._onPressButton.bind(
279 + this,
280 + `${this.state.name1}`
281 + )}
282 + >
226 <Text style={style.name}>{this.state.name1}</Text> 283 <Text style={style.name}>{this.state.name1}</Text>
284 + </TouchableOpacity>
227 </View> 285 </View>
228 <View style={style.rightDownContainer}> 286 <View style={style.rightDownContainer}>
229 - <Text style={style.overview}>{this.state.overview1}</Text> 287 + <TouchableOpacity
288 + onPress={this._onPressButton.bind(
289 + this,
290 + `${this.state.name1}`
291 + )}
292 + >
293 + <Text style={style.overview}>
294 + {this.state.overview1.length < 60
295 + ? `${this.state.overview1}`
296 + : `${this.state.overview1.substring(0, 57)}...\n`}
297 + </Text>
298 + </TouchableOpacity>
230 </View> 299 </View>
231 </View> 300 </View>
232 </View> 301 </View>
233 - {/* <View style={style.lowContainer}> 302 + {/* ----- 3위 ----- */}
234 - <View style={style.halfContainer}> 303 + <View style={style.lowContainer}>
304 + <View style={style.leftContainer}>
305 + <TouchableOpacity
306 + onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
307 + >
235 <Image 308 <Image
236 style={style.poster} 309 style={style.poster}
237 source={{ 310 source={{
238 uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}` 311 uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
239 }} 312 }}
240 /> 313 />
241 - <Text>{this.state.name2}</Text> 314 + </TouchableOpacity>
242 </View> 315 </View>
243 - <View style={style.halfContainer}> 316 + <View style={style.rightContainer}>
244 - <Image 317 + <View style={style.rightUpContainer}>
245 - style={style.poster} 318 + <TouchableOpacity
246 - source={{ 319 + onPress={this._onPressButton.bind(
247 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}` 320 + this,
248 - }} 321 + `${this.state.name2}`
249 - /> 322 + )}
250 - <Text>{this.state.name3}</Text> 323 + >
324 + <Text style={style.name}>{this.state.name2}</Text>
325 + </TouchableOpacity>
326 + </View>
327 + <View style={style.rightDownContainer}>
328 + <TouchableOpacity
329 + onPress={this._onPressButton.bind(
330 + this,
331 + `${this.state.name2}`
332 + )}
333 + >
334 + <Text style={style.overview}>
335 + {this.state.overview2.length < 60
336 + ? `${this.state.overview2}`
337 + : `${this.state.overview2.substring(0, 57)}...\n`}
338 + </Text>
339 + </TouchableOpacity>
251 </View> 340 </View>
252 </View> 341 </View>
342 + </View>
343 + {/* ----- 4위 ----- */}
253 <View style={style.lowContainer}> 344 <View style={style.lowContainer}>
254 - <View style={style.halfContainer}> 345 + <View style={style.leftContainer}>
346 + <TouchableOpacity
347 + onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
348 + >
255 <Image 349 <Image
256 style={style.poster} 350 style={style.poster}
257 source={{ 351 source={{
258 uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}` 352 uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
259 }} 353 }}
260 /> 354 />
261 - <Text>{this.state.name4}</Text> 355 + </TouchableOpacity>
356 + </View>
357 + <View style={style.rightContainer}>
358 + <View style={style.rightUpContainer}>
359 + <TouchableOpacity
360 + onPress={this._onPressButton.bind(
361 + this,
362 + `${this.state.name4}`
363 + )}
364 + >
365 + <Text style={style.name}>{this.state.name4}</Text>
366 + </TouchableOpacity>
367 + </View>
368 + <View style={style.rightDownContainer}>
369 + <TouchableOpacity
370 + onPress={this._onPressButton.bind(
371 + this,
372 + `${this.state.name4}`
373 + )}
374 + >
375 + <Text style={style.overview}>
376 + {this.state.overview4.length < 60
377 + ? `${this.state.overview4}`
378 + : `${this.state.overview4.substring(0, 57)}...\n`}
379 + </Text>
380 + </TouchableOpacity>
262 </View> 381 </View>
263 - <View style={style.halfContainer}>
264 - <Image
265 - style={style.poster}
266 - source={{
267 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
268 - }}
269 - />
270 - <Text>{this.state.name5}</Text>
271 </View> 382 </View>
272 </View> 383 </View>
273 <View style={style.lowContainer}> 384 <View style={style.lowContainer}>
274 - <View style={style.halfContainer}> 385 + <View style={style.leftContainer}>
386 + <TouchableOpacity
387 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
388 + >
275 <Image 389 <Image
276 style={style.poster} 390 style={style.poster}
277 source={{ 391 source={{
278 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}` 392 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
279 }} 393 }}
280 /> 394 />
281 - <Text>{this.state.name6}</Text> 395 + </TouchableOpacity>
282 </View> 396 </View>
283 - <View style={style.halfContainer}> 397 + <View style={style.rightContainer}>
398 + <View style={style.rightUpContainer}>
399 + <TouchableOpacity
400 + onPress={this._onPressButton.bind(
401 + this,
402 + `${this.state.name1}`
403 + )}
404 + >
405 + <Text style={style.name}>{this.state.name1}</Text>
406 + </TouchableOpacity>
407 + </View>
408 + <View style={style.rightDownContainer}>
409 + <TouchableOpacity
410 + onPress={this._onPressButton.bind(
411 + this,
412 + `${this.state.name1}`
413 + )}
414 + >
415 + <Text>
416 + {this.state.overview1.length < 60
417 + ? `${this.state.overview1}`
418 + : `${this.state.overview1.substring(0, 57)}...\n`}
419 + </Text>
420 + </TouchableOpacity>
421 + </View>
422 + </View>
423 + </View>
424 + <View style={style.lowContainer}>
425 + <View style={style.leftContainer}>
426 + <TouchableOpacity
427 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
428 + >
284 <Image 429 <Image
285 style={style.poster} 430 style={style.poster}
286 source={{ 431 source={{
287 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}` 432 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
288 }} 433 }}
289 /> 434 />
290 - <Text>{this.state.name7}</Text> 435 + </TouchableOpacity>
436 + </View>
437 + <View style={style.rightContainer}>
438 + <View style={style.rightUpContainer}>
439 + <TouchableOpacity
440 + onPress={this._onPressButton.bind(
441 + this,
442 + `${this.state.name1}`
443 + )}
444 + >
445 + <Text style={style.name}>{this.state.name1}</Text>
446 + </TouchableOpacity>
447 + </View>
448 + <View style={style.rightDownContainer}>
449 + <TouchableOpacity
450 + onPress={this._onPressButton.bind(
451 + this,
452 + `${this.state.name1}`
453 + )}
454 + >
455 + <Text>
456 + {this.state.overview1.length < 60
457 + ? `${this.state.overview1}`
458 + : `${this.state.overview1.substring(0, 57)}...\n`}
459 + </Text>
460 + </TouchableOpacity>
461 + </View>
291 </View> 462 </View>
292 </View> 463 </View>
293 <View style={style.lowContainer}> 464 <View style={style.lowContainer}>
294 - <View style={style.halfContainer}> 465 + <View style={style.leftContainer}>
466 + <TouchableOpacity
467 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
468 + >
295 <Image 469 <Image
296 style={style.poster} 470 style={style.poster}
297 source={{ 471 source={{
298 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}` 472 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
299 }} 473 }}
300 /> 474 />
301 - <Text>{this.state.name8}</Text> 475 + </TouchableOpacity>
476 + </View>
477 + <View style={style.rightContainer}>
478 + <View style={style.rightUpContainer}>
479 + <TouchableOpacity
480 + onPress={this._onPressButton.bind(
481 + this,
482 + `${this.state.name1}`
483 + )}
484 + >
485 + <Text style={style.name}>{this.state.name1}</Text>
486 + </TouchableOpacity>
487 + </View>
488 + <View style={style.rightDownContainer}>
489 + <TouchableOpacity
490 + onPress={this._onPressButton.bind(
491 + this,
492 + `${this.state.name1}`
493 + )}
494 + >
495 + <Text>
496 + {this.state.overview1.length < 60
497 + ? `${this.state.overview1}`
498 + : `${this.state.overview1.substring(0, 57)}...\n`}
499 + </Text>
500 + </TouchableOpacity>
302 </View> 501 </View>
303 - <View style={style.halfContainer}> 502 + </View>
503 + </View>
504 + <View style={style.lowContainer}>
505 + <View style={style.leftContainer}>
506 + <TouchableOpacity
507 + onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
508 + >
304 <Image 509 <Image
305 style={style.poster} 510 style={style.poster}
306 source={{ 511 source={{
307 - uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}` 512 + uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
308 }} 513 }}
309 /> 514 />
310 - <Text>{this.state.name9}</Text> 515 + </TouchableOpacity>
516 + </View>
517 + <View style={style.rightContainer}>
518 + <View style={style.rightUpContainer}>
519 + <TouchableOpacity
520 + onPress={this._onPressButton.bind(
521 + this,
522 + `${this.state.name1}`
523 + )}
524 + >
525 + <Text style={style.name}>{this.state.name1}</Text>
526 + </TouchableOpacity>
527 + </View>
528 + <View style={style.rightDownContainer}>
529 + <TouchableOpacity
530 + onPress={this._onPressButton.bind(
531 + this,
532 + `${this.state.name1}`
533 + )}
534 + >
535 + <Text>
536 + {this.state.overview1.length < 60
537 + ? `${this.state.overview1}`
538 + : `${this.state.overview1.substring(0, 57)}...\n`}
539 + </Text>
540 + </TouchableOpacity>
541 + </View>
542 + </View>
311 </View> 543 </View>
312 - </View> */}
313 </ScrollView> 544 </ScrollView>
314 </SafeAreaView> 545 </SafeAreaView>
315 ); 546 );
...@@ -317,7 +548,8 @@ export default class MovieRankingTab extends Component { ...@@ -317,7 +548,8 @@ export default class MovieRankingTab extends Component {
317 } 548 }
318 const style = StyleSheet.create({ 549 const style = StyleSheet.create({
319 container: { 550 container: {
320 - flex: 1 551 + flex: 1,
552 + backgroundColor: "black"
321 }, 553 },
322 scrollView: { 554 scrollView: {
323 // backgroundColor: "black", 555 // backgroundColor: "black",
...@@ -336,12 +568,9 @@ const style = StyleSheet.create({ ...@@ -336,12 +568,9 @@ const style = StyleSheet.create({
336 // alignContent: "space-around", 568 // alignContent: "space-around",
337 justifyContent: "center", 569 justifyContent: "center",
338 alignItems: "center", 570 alignItems: "center",
339 - marginBottom: 10 571 + marginLeft: 10,
340 - }, 572 + marginTop: 10,
341 - halfContainer: { 573 + marginBottom: 20
342 - flex: 1,
343 - justifyContent: "center",
344 - alignItems: "center"
345 }, 574 },
346 leftContainer: { 575 leftContainer: {
347 flex: 1, 576 flex: 1,
...@@ -356,10 +585,10 @@ const style = StyleSheet.create({ ...@@ -356,10 +585,10 @@ const style = StyleSheet.create({
356 }, 585 },
357 rightUpContainer: { 586 rightUpContainer: {
358 flex: 1, 587 flex: 1,
359 - paddingTop: 20, 588 + paddingTop: 15,
360 // backgroundColor: "blue", 589 // backgroundColor: "blue",
361 justifyContent: "center", 590 justifyContent: "center",
362 - marginLeft: 10 591 + marginLeft: 20
363 // alignItems: "center" 592 // alignItems: "center"
364 }, 593 },
365 rightDownContainer: { 594 rightDownContainer: {
...@@ -367,23 +596,26 @@ const style = StyleSheet.create({ ...@@ -367,23 +596,26 @@ const style = StyleSheet.create({
367 // backgroundColor: "red", 596 // backgroundColor: "red",
368 // margin: "5%" 597 // margin: "5%"
369 paddingTop: 20, 598 paddingTop: 20,
370 - paddingBottom: 10 599 + paddingBottom: 10,
600 + padding: 15
371 // justifyContent: "center", 601 // justifyContent: "center",
372 // alignItems: "center" 602 // alignItems: "center"
373 }, 603 },
374 poster: { 604 poster: {
375 resizeMode: "cover", 605 resizeMode: "cover",
376 flex: 10, 606 flex: 10,
377 - width: "30%", 607 + width: "40%",
378 - height: 160, 608 + height: 40,
379 - paddingHorizontal: 50, 609 + paddingHorizontal: 58,
380 alignItems: "stretch", 610 alignItems: "stretch",
381 borderRadius: 7 611 borderRadius: 7
382 }, 612 },
383 name: { 613 name: {
384 - fontSize: 16 614 + fontSize: 16,
615 + color: "white"
385 }, 616 },
386 overview: { 617 overview: {
387 - fontSize: 14 618 + fontSize: 14,
619 + color: "white"
388 } 620 }
389 }); 621 });
......
...@@ -63,8 +63,9 @@ export default class Search extends Component { ...@@ -63,8 +63,9 @@ export default class Search extends Component {
63 63
64 render() { 64 render() {
65 return ( 65 return (
66 - <View>
67 <View style={styles.container}> 66 <View style={styles.container}>
67 + <View style={styles.container}>
68 + <View style={styles.searchContainer}>
68 <View style={styles.input}> 69 <View style={styles.input}>
69 <TextInput 70 <TextInput
70 style={styles.inputText} 71 style={styles.inputText}
...@@ -73,18 +74,22 @@ export default class Search extends Component { ...@@ -73,18 +74,22 @@ export default class Search extends Component {
73 value={this.state.typing} 74 value={this.state.typing}
74 onChangeText={typing => this.setState({ typing })} 75 onChangeText={typing => this.setState({ typing })}
75 /> 76 />
76 - <TouchableOpacity onPress={() => this.searching(this.state.typing)}> 77 + <TouchableOpacity
78 + onPress={() => this.searching(this.state.typing)}
79 + >
77 <Icon name="ios-search" /> 80 <Icon name="ios-search" />
78 </TouchableOpacity> 81 </TouchableOpacity>
79 </View> 82 </View>
80 </View> 83 </View>
84 + <View style={styles.container}>
81 <SafeAreaView> 85 <SafeAreaView>
82 <ScrollView> 86 <ScrollView>
87 + <View style={styles.container}>
83 <Card> 88 <Card>
84 {this.state.results.map(result => ( 89 {this.state.results.map(result => (
85 <View style={styles.lowContainer}> 90 <View style={styles.lowContainer}>
86 <View style={styles.leftContainer}> 91 <View style={styles.leftContainer}>
87 - <CardItem> 92 + <CardItem style={styles.container}>
88 { 93 {
89 <Image 94 <Image
90 source={{ 95 source={{
...@@ -100,11 +105,11 @@ export default class Search extends Component { ...@@ -100,11 +105,11 @@ export default class Search extends Component {
100 <Text style={styles.name}>{result.title}</Text> 105 <Text style={styles.name}>{result.title}</Text>
101 </View> 106 </View>
102 <View style={styles.rightDownContainer}> 107 <View style={styles.rightDownContainer}>
103 - <CardItem> 108 + <CardItem style={styles.container}>
104 <Text style={styles.overview}> 109 <Text style={styles.overview}>
105 {result.overview.length < 60 110 {result.overview.length < 60
106 ? `${result.overview}` 111 ? `${result.overview}`
107 - : `${result.overview.substring(0, 57)}...`} 112 + : `${result.overview.substring(0, 57)}...\n`}
108 </Text> 113 </Text>
109 </CardItem> 114 </CardItem>
110 </View> 115 </View>
...@@ -112,17 +117,25 @@ export default class Search extends Component { ...@@ -112,17 +117,25 @@ export default class Search extends Component {
112 </View> 117 </View>
113 ))} 118 ))}
114 </Card> 119 </Card>
120 + </View>
115 </ScrollView> 121 </ScrollView>
116 </SafeAreaView> 122 </SafeAreaView>
117 </View> 123 </View>
124 + </View>
125 + </View>
118 ); 126 );
119 } 127 }
120 } 128 }
121 129
122 const styles = StyleSheet.create({ 130 const styles = StyleSheet.create({
123 container: { 131 container: {
124 - marginLeft: 50, 132 + flex: 1,
125 - marginRight: 50 133 + backgroundColor: "black"
134 + },
135 + searchContainer: {
136 + backgroundColor: "black",
137 + marginLeft: 40,
138 + marginRight: 40
126 }, 139 },
127 input: { 140 input: {
128 borderRadius: 10, 141 borderRadius: 10,
...@@ -146,29 +159,32 @@ const styles = StyleSheet.create({ ...@@ -146,29 +159,32 @@ const styles = StyleSheet.create({
146 flex: 1 159 flex: 1
147 }, 160 },
148 lowContainer: { 161 lowContainer: {
162 + backgroundColor: "black",
149 flex: 1, 163 flex: 1,
150 flexDirection: "row", 164 flexDirection: "row",
151 justifyContent: "center", 165 justifyContent: "center",
152 - alignItems: "center", 166 + alignItems: "center"
153 - marginBottom: 10
154 }, 167 },
155 leftContainer: { 168 leftContainer: {
156 flex: 1, 169 flex: 1,
170 + backgroundColor: "black",
157 justifyContent: "center", 171 justifyContent: "center",
158 alignItems: "center" 172 alignItems: "center"
159 }, 173 },
160 rightContainer: { 174 rightContainer: {
161 - flex: 2 175 + flex: 2,
176 + backgroundColor: "black"
162 }, 177 },
163 rightUpContainer: { 178 rightUpContainer: {
164 flex: 1, 179 flex: 1,
165 - paddingTop: 20, 180 + backgroundColor: "black",
181 + paddingTop: 35,
166 justifyContent: "center", 182 justifyContent: "center",
167 - marginLeft: 10 183 + marginLeft: 20
168 }, 184 },
169 rightDownContainer: { 185 rightDownContainer: {
170 flex: 3, 186 flex: 3,
171 - paddingTop: 20, 187 + backgroundColor: "black",
172 paddingBottom: 10 188 paddingBottom: 10
173 }, 189 },
174 poster: { 190 poster: {
...@@ -176,18 +192,17 @@ const styles = StyleSheet.create({ ...@@ -176,18 +192,17 @@ const styles = StyleSheet.create({
176 flex: 10, 192 flex: 10,
177 width: "30%", 193 width: "30%",
178 height: 160, 194 height: 160,
195 + marginLeft: 10,
179 paddingHorizontal: 50, 196 paddingHorizontal: 50,
180 alignItems: "stretch", 197 alignItems: "stretch",
181 borderRadius: 7 198 borderRadius: 7
182 }, 199 },
183 - content: {
184 - flex: 1,
185 - flexDirection: "row"
186 - },
187 name: { 200 name: {
188 - fontSize: 16 201 + fontSize: 16,
202 + color: "white"
189 }, 203 },
190 overview: { 204 overview: {
191 - fontSize: 14 205 + fontSize: 14,
206 + color: "white"
192 } 207 }
193 }); 208 });
......
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 -import { View, Text, StyleSheet } from 'react-native'; 2 +import { View, Text, StyleSheet } from "react-native";
3 -import { Icon } from 'native-base'; 3 +import { Icon } from "native-base";
4 4
5 export default class SeenMovieTab extends Component { 5 export default class SeenMovieTab extends Component {
6 static navigationOptions = { 6 static navigationOptions = {
7 tabBarIcon: ({ tintColor }) => ( 7 tabBarIcon: ({ tintColor }) => (
8 - <Icon name='ios-albums' style={{ color: tintColor }} /> 8 + <Icon name="ios-albums" style={{ color: tintColor }} />
9 ) 9 )
10 - } 10 + };
11 render() { 11 render() {
12 return ( 12 return (
13 <View style={style.container}> 13 <View style={style.container}>
...@@ -19,8 +19,9 @@ export default class SeenMovieTab extends Component { ...@@ -19,8 +19,9 @@ export default class SeenMovieTab extends Component {
19 19
20 const style = StyleSheet.create({ 20 const style = StyleSheet.create({
21 container: { 21 container: {
22 + backgroundColor: "black",
22 flex: 1, 23 flex: 1,
23 - alignItems: 'center', 24 + alignItems: "center",
24 - justifyContent: 'center', 25 + justifyContent: "center"
25 } 26 }
26 }); 27 });
......
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 -import { View, Text, StyleSheet } from 'react-native'; 2 +import { View, Text, StyleSheet } from "react-native";
3 -import { Icon } from 'native-base'; 3 +import { Icon } from "native-base";
4 4
5 export default class WantToWatchTab extends Component { 5 export default class WantToWatchTab extends Component {
6 -
7 static navigationOptions = { 6 static navigationOptions = {
8 tabBarIcon: ({ tintColor }) => ( 7 tabBarIcon: ({ tintColor }) => (
9 - <Icon name='ios-star' style={{ color: tintColor }} /> 8 + <Icon name="ios-star" style={{ color: tintColor }} />
10 ) 9 )
11 - } 10 + };
12 render() { 11 render() {
13 return ( 12 return (
14 <View style={style.container}> 13 <View style={style.container}>
...@@ -20,8 +19,9 @@ export default class WantToWatchTab extends Component { ...@@ -20,8 +19,9 @@ export default class WantToWatchTab extends Component {
20 19
21 const style = StyleSheet.create({ 20 const style = StyleSheet.create({
22 container: { 21 container: {
22 + backgroundColor: "black",
23 flex: 1, 23 flex: 1,
24 - alignItems: 'center', 24 + alignItems: "center",
25 - justifyContent: 'center', 25 + justifyContent: "center"
26 } 26 }
27 }); 27 });
......
...@@ -9,6 +9,8 @@ import MovieRankingTab from "./AppTabNavigator/WantToWatchTab"; ...@@ -9,6 +9,8 @@ import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
9 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab"; 9 import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
10 import Search from ".//AppTabNavigator/Search"; 10 import Search from ".//AppTabNavigator/Search";
11 import { Platform } from "react-native"; 11 import { Platform } from "react-native";
12 +import { black } from "ansi-colors";
13 +import { colors } from "react-native-elements";
12 //import { Ionicons } from '@expo/vector-icons'; 14 //import { Ionicons } from '@expo/vector-icons';
13 15
14 const AppTabNavigator = createMaterialTopTabNavigator( 16 const AppTabNavigator = createMaterialTopTabNavigator(
...@@ -26,13 +28,13 @@ const AppTabNavigator = createMaterialTopTabNavigator( ...@@ -26,13 +28,13 @@ const AppTabNavigator = createMaterialTopTabNavigator(
26 style: { 28 style: {
27 ...Platform.select({ 29 ...Platform.select({
28 android: { 30 android: {
29 - backgroundColor: "white" 31 + backgroundColor: "black"
30 } 32 }
31 }) 33 })
32 }, 34 },
33 iconStyle: { height: 30 }, 35 iconStyle: { height: 30 },
34 - activeTintColor: "#000", 36 + activeTintColor: "white",
35 - inactiveTintColor: "#d1cece", 37 + inactiveTintColor: "dimgray",
36 upperCaseLabel: false, 38 upperCaseLabel: false,
37 showLabel: false, 39 showLabel: false,
38 showIcon: true 40 showIcon: true
...@@ -46,7 +48,14 @@ export default class MainScreen extends Component { ...@@ -46,7 +48,14 @@ export default class MainScreen extends Component {
46 // navigationOptions 코드 추가 48 // navigationOptions 코드 추가
47 static navigationOptions = { 49 static navigationOptions = {
48 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 50 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
49 - title: "PoketMovie" 51 + title: " Poket Movie",
52 + headerStyle: {
53 + backgroundColor: "black"
54 + },
55 + headerTintColor: "white",
56 + headerTitleStyle: {
57 + fontWeight: "bold"
58 + }
50 }; 59 };
51 60
52 render() { 61 render() {
......
No preview for this file type
No preview for this file type
1 { 1 {
2 "main": "node_modules/expo/AppEntry.js", 2 "main": "node_modules/expo/AppEntry.js",
3 + "rnpm": {
4 + "assets": [
5 + "./assets/fonts"
6 + ]
7 + },
3 "scripts": { 8 "scripts": {
4 "start": "expo start", 9 "start": "expo start",
5 "android": "expo start --android", 10 "android": "expo start --android",
...@@ -10,6 +15,7 @@ ...@@ -10,6 +15,7 @@
10 "dependencies": { 15 "dependencies": {
11 "axios": "^0.19.0", 16 "axios": "^0.19.0",
12 "expo": "^35.0.0", 17 "expo": "^35.0.0",
18 + "expo-font": "~7.0.0",
13 "native-base": "^2.13.8", 19 "native-base": "^2.13.8",
14 "react": "16.8.3", 20 "react": "16.8.3",
15 "react-dom": "16.8.3", 21 "react-dom": "16.8.3",
......