신승민 / 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 265 additions and 220 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 });
12 13
13 -export default createAppContainer(AppStackNavigator);
...\ No newline at end of file ...\ No newline at end of file
14 +export default createAppContainer(AppStackNavigator);
......
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";
9 const NAVER_CLIENT_SECRET = "0GRb3uya1U"; 17 const NAVER_CLIENT_SECRET = "0GRb3uya1U";
10 18
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 + };
17 - state = {
18 - typing: "",
19 - keyword: "",
20 - items: [[0],[0]]
21 - };
22 25
23 - getNaverApi = async (search) => { 26 + state = {
24 - fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, { 27 + typing: "",
25 - headers: { 28 + keyword: "",
26 - "X-Naver-Client-Id": NAVER_CLIENT_ID, 29 + items: [],
27 - "X-Naver-Client-Secret": NAVER_CLIENT_SECRET 30 + info: [],
28 - } 31 + results: []
29 - }) 32 + };
30 - .then(response => response.json())
31 - .then(json => this.setState({items: json.items}))};
32 -
33 - handleSearchUpdate = text => {
34 - this.setState({
35 - searchTerm: text
36 - });
37 - };
38 -
39 - searching = (typing) => {
40 - this.setState({
41 - keyword: typing,
42 - typing: ""
43 - })
44 - this.getNaverApi(typing)
45 - }
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 33
55 - render() { 34 + getDB = async search => {
56 - return ( 35 + axios
57 - <View style={styles.container}> 36 + .get(
58 - <View style={styles.input}> 37 + `https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
59 - <TextInput 38 + )
60 - style={styles.inputText} 39 + .then(response => {
61 - placeholder='Search' 40 + this.setState({ results: response.data.results });
62 - autoCorrect={ false } 41 + console.log(response.data.results);
63 - value = {this.state.typing} 42 + });
64 - onChangeText= { (typing) => this.setState({typing})} 43 + };
44 +
45 + getNaverApi = async search => {
46 + fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
47 + headers: {
48 + "X-Naver-Client-Id": NAVER_CLIENT_ID,
49 + "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
50 + }
51 + })
52 + .then(response => response.json())
53 + .then(json => this.setState({ items: json.items }));
54 + };
55 +
56 + searching = typing => {
57 + this.setState({
58 + keyword: typing,
59 + typing: ""
60 + });
61 + this.getDB(typing);
62 + };
63 +
64 + render() {
65 + return (
66 + <View>
67 + <View style={styles.container}>
68 + <View style={styles.input}>
69 + <TextInput
70 + style={styles.inputText}
71 + placeholder="Search"
72 + autoCorrect={false}
73 + value={this.state.typing}
74 + onChangeText={typing => this.setState({ typing })}
75 + />
76 + <TouchableOpacity onPress={() => this.searching(this.state.typing)}>
77 + <Icon name="ios-search" />
78 + </TouchableOpacity>
79 + </View>
80 + </View>
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}
65 /> 94 />
66 - <TouchableOpacity onPress = {() => this.searching(this.state.typing)}> 95 + }
67 - <Icon name='ios-search'/> 96 + </CardItem>
68 - </TouchableOpacity> 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)}...`}
108 + </Text>
109 + </CardItem>
110 + </View>
111 + </View>
69 </View> 112 </View>
70 - <Text> 113 + ))}
71 - {this.state.keyword} 114 + </Card>
72 - </Text> 115 + </ScrollView>
73 - {/* <Image style={styles.imagecontainer} 116 + </SafeAreaView>
74 - style={{ height: "50%", width: "50%" }} 117 + </View>
75 - source={{ uri: `${this.state.items[1].image}` }} 118 + );
76 - source={{ uri: `${this.state.items[0].image}` }} 119 + }
77 - /> */}
78 - {this.viewimage()}
79 - </View>
80 - )}
81 } 120 }
82 121
83 const styles = StyleSheet.create({ 122 const styles = StyleSheet.create({
84 - container: {
85 - marginLeft: 50,
86 - marginRight: 50,
87 - },
88 - input: {
89 - borderRadius: 10,
90 - backgroundColor: "#FFF",
91 - paddingLeft: 10,
92 - paddingRight: 10,
93 - height: 50,
94 - alignItems: "center",
95 - flexDirection: 'row',
96 - justifyContent: 'space-between',
97 - borderBottomColor: "#bbb",
98 - borderBottomWidth: StyleSheet.hairlineWidth,
99 - },
100 - inputText: {
101 - flex: 1,
102 - },
103 - addBtn: {
104 - color: '#4169E1'
105 - },
106 - imagecontainer:{
107 - flex: 1
108 - }
109 -});
...\ No newline at end of file ...\ No newline at end of file
123 + container: {
124 + marginLeft: 50,
125 + marginRight: 50
126 + },
127 + input: {
128 + borderRadius: 10,
129 + backgroundColor: "#FFF",
130 + paddingLeft: 10,
131 + paddingRight: 10,
132 + height: 50,
133 + alignItems: "center",
134 + flexDirection: "row",
135 + justifyContent: "space-between",
136 + borderBottomColor: "#bbb",
137 + borderBottomWidth: StyleSheet.hairlineWidth
138 + },
139 + inputText: {
140 + flex: 1
141 + },
142 + addBtn: {
143 + color: "#4169E1"
144 + },
145 + imagecontainer: {
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
192 + }
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 + },
20 - animationEnabled: true, 21 + {
21 - swipeEnabled: true, 22 + animationEnabled: true,
22 - tabBarPosition: "bottom", 23 + swipeEnabled: true,
23 - tabBarOptions: { 24 + tabBarPosition: "bottom",
24 - style: { 25 + tabBarOptions: {
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
39 + }
37 } 40 }
38 -}); 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 -});
...\ No newline at end of file ...\ No newline at end of file
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"
......