신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
f1084289 1 parent 5f449598

add listview

Expand all
Inline Side-by-side
Showing 9 changed files with 207 additions and 162 deletions
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 } 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 MovieInfo from "./Components/MovieInfo";
6 7
7 const AppStackNavigator = createStackNavigator({ 8 const AppStackNavigator = createStackNavigator({
8 - Main:{ 9 + Main: {
9 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록 10 screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
10 } 11 }
11 }); 12 });
......
This diff is collapsed. Click to expand it.
1 -import React, { Component } from 'react'; 1 +import React, { Component } from "react";
2 -import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity, Alert } from 'react-native'; 2 +import {
3 -import { Icon } from 'native-base'; 3 + Image,
4 + View,
5 + Text,
6 + TextInput,
7 + StyleSheet,
8 + TouchableOpacity,
9 + SafeAreaView,
10 + ScrollView
11 +} from "react-native";
12 +import { Card, CardItem, Icon } from "native-base";
4 import axios from "axios"; 13 import axios from "axios";
5 -import { AsyncStorage } from "react-native";
6 14
7 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 15 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
8 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 16 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
...@@ -11,16 +19,30 @@ const NAVER_CLIENT_SECRET = "0GRb3uya1U"; ...@@ -11,16 +19,30 @@ const NAVER_CLIENT_SECRET = "0GRb3uya1U";
11 export default class Search extends Component { 19 export default class Search extends Component {
12 static navigationOptions = { 20 static navigationOptions = {
13 tabBarIcon: ({ tintColor }) => ( 21 tabBarIcon: ({ tintColor }) => (
14 - <Icon name='ios-search' style={{ color: tintColor }} /> 22 + <Icon name="ios-search" style={{ color: tintColor }} />
15 ) 23 )
16 - } 24 + };
25 +
17 state = { 26 state = {
18 typing: "", 27 typing: "",
19 keyword: "", 28 keyword: "",
20 - items: [[0],[0]] 29 + items: [],
30 + info: [],
31 + results: []
21 }; 32 };
22 33
23 - getNaverApi = async (search) => { 34 + getDB = async search => {
35 + axios
36 + .get(
37 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
38 + )
39 + .then(response => {
40 + this.setState({ results: response.data.results });
41 + console.log(response.data.results);
42 + });
43 + };
44 +
45 + getNaverApi = async search => {
24 fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, { 46 fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
25 headers: { 47 headers: {
26 "X-Naver-Client-Id": NAVER_CLIENT_ID, 48 "X-Naver-Client-Id": NAVER_CLIENT_ID,
...@@ -28,62 +50,79 @@ export default class Search extends Component { ...@@ -28,62 +50,79 @@ export default class Search extends Component {
28 } 50 }
29 }) 51 })
30 .then(response => response.json()) 52 .then(response => response.json())
31 - .then(json => this.setState({items: json.items}))}; 53 + .then(json => this.setState({ items: json.items }));
32 -
33 - handleSearchUpdate = text => {
34 - this.setState({
35 - searchTerm: text
36 - });
37 }; 54 };
38 55
39 - searching = (typing) => { 56 + searching = typing => {
40 this.setState({ 57 this.setState({
41 keyword: typing, 58 keyword: typing,
42 typing: "" 59 typing: ""
43 - }) 60 + });
44 - this.getNaverApi(typing) 61 + this.getDB(typing);
45 - } 62 + };
46 -
47 - viewimage(){
48 - return this.state.items.map( item =>
49 - <Image style={styles.imagecontainer}
50 - style={{ height: "50%", width: "50%" }}
51 - source={{ uri: `${item.image}`}}
52 - />)
53 - }
54 63
55 render() { 64 render() {
56 return ( 65 return (
66 + <View>
57 <View style={styles.container}> 67 <View style={styles.container}>
58 <View style={styles.input}> 68 <View style={styles.input}>
59 <TextInput 69 <TextInput
60 style={styles.inputText} 70 style={styles.inputText}
61 - placeholder='Search' 71 + placeholder="Search"
62 - autoCorrect={ false } 72 + autoCorrect={false}
63 - value = {this.state.typing} 73 + value={this.state.typing}
64 - onChangeText= { (typing) => this.setState({typing})} 74 + onChangeText={typing => this.setState({ typing })}
65 /> 75 />
66 - <TouchableOpacity onPress = {() => this.searching(this.state.typing)}> 76 + <TouchableOpacity onPress={() => this.searching(this.state.typing)}>
67 - <Icon name='ios-search'/> 77 + <Icon name="ios-search" />
68 </TouchableOpacity> 78 </TouchableOpacity>
69 </View> 79 </View>
70 - <Text> 80 + </View>
71 - {this.state.keyword} 81 + <SafeAreaView>
82 + <ScrollView>
83 + <Card>
84 + {this.state.results.map(result => (
85 + <View style={styles.lowContainer}>
86 + <View style={styles.leftContainer}>
87 + <CardItem>
88 + {
89 + <Image
90 + source={{
91 + uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
92 + }}
93 + style={styles.poster}
94 + />
95 + }
96 + </CardItem>
97 + </View>
98 + <View style={styles.rightContainer}>
99 + <View style={styles.rightUpContainer}>
100 + <Text style={styles.name}>{result.title}</Text>
101 + </View>
102 + <View style={styles.rightDownContainer}>
103 + <CardItem>
104 + <Text style={styles.overview}>
105 + {result.overview.length < 60
106 + ? `${result.overview}`
107 + : `${result.overview.substring(0, 57)}...`}
72 </Text> 108 </Text>
73 - {/* <Image style={styles.imagecontainer} 109 + </CardItem>
74 - style={{ height: "50%", width: "50%" }}
75 - source={{ uri: `${this.state.items[1].image}` }}
76 - source={{ uri: `${this.state.items[0].image}` }}
77 - /> */}
78 - {this.viewimage()}
79 </View> 110 </View>
80 - )} 111 + </View>
112 + </View>
113 + ))}
114 + </Card>
115 + </ScrollView>
116 + </SafeAreaView>
117 + </View>
118 + );
119 + }
81 } 120 }
82 121
83 const styles = StyleSheet.create({ 122 const styles = StyleSheet.create({
84 container: { 123 container: {
85 marginLeft: 50, 124 marginLeft: 50,
86 - marginRight: 50, 125 + marginRight: 50
87 }, 126 },
88 input: { 127 input: {
89 borderRadius: 10, 128 borderRadius: 10,
...@@ -92,18 +131,63 @@ const styles = StyleSheet.create({ ...@@ -92,18 +131,63 @@ const styles = StyleSheet.create({
92 paddingRight: 10, 131 paddingRight: 10,
93 height: 50, 132 height: 50,
94 alignItems: "center", 133 alignItems: "center",
95 - flexDirection: 'row', 134 + flexDirection: "row",
96 - justifyContent: 'space-between', 135 + justifyContent: "space-between",
97 borderBottomColor: "#bbb", 136 borderBottomColor: "#bbb",
98 - borderBottomWidth: StyleSheet.hairlineWidth, 137 + borderBottomWidth: StyleSheet.hairlineWidth
99 }, 138 },
100 inputText: { 139 inputText: {
101 - flex: 1, 140 + flex: 1
102 }, 141 },
103 addBtn: { 142 addBtn: {
104 - color: '#4169E1' 143 + color: "#4169E1"
105 }, 144 },
106 - imagecontainer:{ 145 + imagecontainer: {
107 flex: 1 146 flex: 1
147 + },
148 + lowContainer: {
149 + flex: 1,
150 + flexDirection: "row",
151 + justifyContent: "center",
152 + alignItems: "center",
153 + marginBottom: 10
154 + },
155 + leftContainer: {
156 + flex: 1,
157 + justifyContent: "center",
158 + alignItems: "center"
159 + },
160 + rightContainer: {
161 + flex: 2
162 + },
163 + rightUpContainer: {
164 + flex: 1,
165 + paddingTop: 20,
166 + justifyContent: "center",
167 + marginLeft: 10
168 + },
169 + rightDownContainer: {
170 + flex: 3,
171 + paddingTop: 20,
172 + paddingBottom: 10
173 + },
174 + poster: {
175 + resizeMode: "cover",
176 + flex: 10,
177 + width: "30%",
178 + height: 160,
179 + paddingHorizontal: 50,
180 + alignItems: "stretch",
181 + borderRadius: 7
182 + },
183 + content: {
184 + flex: 1,
185 + flexDirection: "row"
186 + },
187 + name: {
188 + fontSize: 16
189 + },
190 + overview: {
191 + fontSize: 14
108 } 192 }
109 }); 193 });
......
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 { 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 { createStackNavigator } from "react-navigation-stack";
6 -import SeenMovieTab from './AppTabNavigator/MovieRankingTab'; 6 +import { createMaterialTopTabNavigator } from "react-navigation-tabs";
7 -import MovieRankingTab from './AppTabNavigator/WantToWatchTab'; 7 +import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
8 -import WantToWatchTab from './AppTabNavigator/SeenMovieTab'; 8 +import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
9 -import Search from './/AppTabNavigator/Search'; 9 +import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
10 -import { Platform } from 'react-native' 10 +import Search from ".//AppTabNavigator/Search";
11 +import { Platform } from "react-native";
11 //import { Ionicons } from '@expo/vector-icons'; 12 //import { Ionicons } from '@expo/vector-icons';
12 13
13 - 14 +const AppTabNavigator = createMaterialTopTabNavigator(
14 -const AppTabNavigator = createMaterialTopTabNavigator({ 15 + {
15 - SeenMovieTab:{ screen: SeenMovieTab }, 16 + SeenMovieTab: { screen: SeenMovieTab },
16 - MovieRankingTab:{ screen: MovieRankingTab }, 17 + MovieRankingTab: { screen: MovieRankingTab },
17 - WantToWatchTab:{ screen: WantToWatchTab }, 18 + WantToWatchTab: { screen: WantToWatchTab },
18 Search: { screen: Search } 19 Search: { screen: Search }
19 -}, { 20 + },
21 + {
20 animationEnabled: true, 22 animationEnabled: true,
21 swipeEnabled: true, 23 swipeEnabled: true,
22 tabBarPosition: "bottom", 24 tabBarPosition: "bottom",
23 tabBarOptions: { 25 tabBarOptions: {
24 style: { 26 style: {
25 ...Platform.select({ 27 ...Platform.select({
26 - android:{ 28 + android: {
27 - backgroundColor:'white', 29 + backgroundColor: "white"
28 } 30 }
29 }) 31 })
30 }, 32 },
31 iconStyle: { height: 30 }, 33 iconStyle: { height: 30 },
32 - activeTintColor: '#000', 34 + activeTintColor: "#000",
33 - inactiveTintColor: '#d1cece', 35 + inactiveTintColor: "#d1cece",
34 upperCaseLabel: false, 36 upperCaseLabel: false,
35 showLabel: false, 37 showLabel: false,
36 - showIcon: true, 38 + showIcon: true
37 } 39 }
38 -}); 40 + }
41 +);
39 42
40 const AppTabContainet = createAppContainer(AppTabNavigator); 43 const AppTabContainet = createAppContainer(AppTabNavigator);
41 44
...@@ -43,19 +46,18 @@ export default class MainScreen extends Component { ...@@ -43,19 +46,18 @@ export default class MainScreen extends Component {
43 // navigationOptions 코드 추가 46 // navigationOptions 코드 추가
44 static navigationOptions = { 47 static navigationOptions = {
45 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>, 48 //headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
46 - title: 'PoketMovie' 49 + title: "PoketMovie"
47 - 50 + };
48 -}
49 51
50 render() { 52 render() {
51 - return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다. 53 + return <AppTabContainet />; // AppTabContainet 컴포넌트를 리턴한다.
52 } 54 }
53 } 55 }
54 56
55 const styles = StyleSheet.create({ 57 const styles = StyleSheet.create({
56 container: { 58 container: {
57 flex: 1, 59 flex: 1,
58 - alignItems: 'center', 60 + alignItems: "center",
59 - justifyContent: 'center', 61 + justifyContent: "center"
60 } 62 }
61 }); 63 });
......
1 +import React, { Component } from "react";
2 +import { StyleSheet, Text, View, StatusBar } from "react-native";
3 +
4 +export default class MovieRankingTab extends Component {
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 +});
1 -import React from "react";
2 -import { StyleSheet, Text, View } from 'react-native';
3 -import { AsyncStorage } from "react-native";
4 -import Loading from "./Loading";
5 -import axios from "axios";
6 -
7 -const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
8 -const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
9 -const NAVER_CLIENT_SECRET = "0GRb3uya1U";
10 -
11 -// const option = {
12 -// query: "겨울왕국"
13 -// };
14 -
15 -// request.get(
16 -// {
17 -// uri: "https://openapi.naver.com/v1/search/movie", //xml 요청 주소는 https://openapi.naver.com/v1/search/image.xml
18 -// qs: option,
19 -// headers: {
20 -// "X-Naver-Client-Id": NAVER_CLIENT_ID,
21 -// "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
22 -// }
23 -// },
24 -// function(err, res, body) {
25 -// let json = JSON.parse(body); //json으로 파싱
26 -// console.log(json);
27 -// }
28 -// );
29 -
30 -export default class extends React.Component {
31 - state = {
32 - isLoading: true
33 - };
34 - getNaverApi = async () => {
35 - fetch("https://openapi.naver.com/v1/search/movie.json?query='겨울왕국 2'", {
36 - headers: {
37 - "X-Naver-Client-Id": NAVER_CLIENT_ID,
38 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
39 - }
40 - })
41 - .then(response => response.json())
42 - .then(json => {
43 - console.log(json.items[0].image);
44 - });
45 - };
46 - getMovieList = async () => {
47 - axios
48 - .get(
49 - `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
50 - )
51 - .then(response => {
52 - for (var i = 0; i < 10; i++) {
53 - console.log(
54 - response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
55 - );
56 - }
57 - })
58 - .catch(error => {
59 - console.log(error);
60 - });
61 - };
62 - componentDidMount() {
63 - this.getMovieList();
64 - this.getNaverApi();
65 - }
66 - render() {
67 - return (
68 - <View>
69 - <Text>WantToWatchTab</Text>
70 - </View>
71 - );
72 -}
73 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", 16 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
17 "react-native-axios": "^0.17.1", 17 "react-native-axios": "^0.17.1",
18 "react-native-elements": "^1.2.7", 18 "react-native-elements": "^1.2.7",
19 - "react-native-gesture-handler": "~1.3.0", 19 + "react-native-gesture-handler": "^1.5.2",
20 "react-native-reanimated": "~1.2.0", 20 "react-native-reanimated": "~1.2.0",
21 "react-native-screens": "~1.0.0-alpha.23", 21 "react-native-screens": "~1.0.0-alpha.23",
22 "react-native-stack": "^1.0.0-alpha11", 22 "react-native-stack": "^1.0.0-alpha11",
......
This diff is collapsed. Click to expand it.
...@@ -2726,6 +2726,11 @@ growly@^1.3.0: ...@@ -2726,6 +2726,11 @@ 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 +
2729 har-schema@^2.0.0: 2734 har-schema@^2.0.0:
2730 version "2.0.0" 2735 version "2.0.0"
2731 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" 2736 resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
...@@ -4711,14 +4716,15 @@ react-native-elements@^1.2.7: ...@@ -4711,14 +4716,15 @@ react-native-elements@^1.2.7:
4711 react-native-ratings "^6.3.0" 4716 react-native-ratings "^6.3.0"
4712 react-native-status-bar-height "^2.2.0" 4717 react-native-status-bar-height "^2.2.0"
4713 4718
4714 -react-native-gesture-handler@~1.3.0: 4719 +react-native-gesture-handler@^1.5.2:
4715 - version "1.3.0" 4720 + version "1.5.2"
4716 - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f" 4721 + resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz#281111550bf1eee10b7feba5278d142169892731"
4717 - integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ== 4722 + integrity sha512-Xp03dq4XYVTD0xmWx4DW4eX+ox1NQLjHmbykspTdS5FCNIVIOekVXRLFCw1698/v8dYUHApNo6K3s3BCD8fqPA==
4718 dependencies: 4723 dependencies:
4724 + hammerjs "^2.0.8"
4719 hoist-non-react-statics "^2.3.1" 4725 hoist-non-react-statics "^2.3.1"
4720 - invariant "^2.2.2" 4726 + invariant "^2.2.4"
4721 - prop-types "^15.5.10" 4727 + prop-types "^15.7.2"
4722 4728
4723 react-native-iphone-x-helper@^1.0.3: 4729 react-native-iphone-x-helper@^1.0.3:
4724 version "1.2.1" 4730 version "1.2.1"
......