신승민 / pocketMovie

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

Edit GUI

Expand all
Inline Side-by-side
Showing 8 changed files with 140 additions and 109 deletions
This diff is collapsed. Click to expand it.
...@@ -63,57 +63,65 @@ export default class Search extends Component { ...@@ -63,57 +63,65 @@ export default class Search extends Component {
63 63
64 render() { 64 render() {
65 return ( 65 return (
66 - <View> 66 + <View style={styles.container}>
67 <View style={styles.container}> 67 <View style={styles.container}>
68 - <View style={styles.input}> 68 + <View style={styles.searchContainer}>
69 - <TextInput 69 + <View style={styles.input}>
70 - style={styles.inputText} 70 + <TextInput
71 - placeholder="Search" 71 + style={styles.inputText}
72 - autoCorrect={false} 72 + placeholder="Search"
73 - value={this.state.typing} 73 + autoCorrect={false}
74 - onChangeText={typing => this.setState({ typing })} 74 + value={this.state.typing}
75 - /> 75 + onChangeText={typing => this.setState({ typing })}
76 - <TouchableOpacity onPress={() => this.searching(this.state.typing)}> 76 + />
77 - <Icon name="ios-search" /> 77 + <TouchableOpacity
78 - </TouchableOpacity> 78 + onPress={() => this.searching(this.state.typing)}
79 + >
80 + <Icon name="ios-search" />
81 + </TouchableOpacity>
82 + </View>
79 </View> 83 </View>
80 - </View> 84 + <View style={styles.container}>
81 - <SafeAreaView> 85 + <SafeAreaView>
82 - <ScrollView> 86 + <ScrollView>
83 - <Card> 87 + <View style={styles.container}>
84 - {this.state.results.map(result => ( 88 + <Card>
85 - <View style={styles.lowContainer}> 89 + {this.state.results.map(result => (
86 - <View style={styles.leftContainer}> 90 + <View style={styles.lowContainer}>
87 - <CardItem> 91 + <View style={styles.leftContainer}>
88 - { 92 + <CardItem style={styles.container}>
89 - <Image 93 + {
90 - source={{ 94 + <Image
91 - uri: `https://image.tmdb.org/t/p/original/${result.poster_path}` 95 + source={{
92 - }} 96 + uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
93 - style={styles.poster} 97 + }}
94 - /> 98 + style={styles.poster}
95 - } 99 + />
96 - </CardItem> 100 + }
97 - </View> 101 + </CardItem>
98 - <View style={styles.rightContainer}> 102 + </View>
99 - <View style={styles.rightUpContainer}> 103 + <View style={styles.rightContainer}>
100 - <Text style={styles.name}>{result.title}</Text> 104 + <View style={styles.rightUpContainer}>
101 - </View> 105 + <Text style={styles.name}>{result.title}</Text>
102 - <View style={styles.rightDownContainer}> 106 + </View>
103 - <CardItem> 107 + <View style={styles.rightDownContainer}>
104 - <Text style={styles.overview}> 108 + <CardItem style={styles.container}>
105 - {result.overview.length < 60 109 + <Text style={styles.overview}>
106 - ? `${result.overview}` 110 + {result.overview.length < 60
107 - : `${result.overview.substring(0, 57)}...`} 111 + ? `${result.overview}`
108 - </Text> 112 + : `${result.overview.substring(0, 57)}...\n`}
109 - </CardItem> 113 + </Text>
110 - </View> 114 + </CardItem>
111 - </View> 115 + </View>
116 + </View>
117 + </View>
118 + ))}
119 + </Card>
112 </View> 120 </View>
113 - ))} 121 + </ScrollView>
114 - </Card> 122 + </SafeAreaView>
115 - </ScrollView> 123 + </View>
116 - </SafeAreaView> 124 + </View>
117 </View> 125 </View>
118 ); 126 );
119 } 127 }
...@@ -121,8 +129,13 @@ export default class Search extends Component { ...@@ -121,8 +129,13 @@ export default class Search extends Component {
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}>
14 - <Text>SeenMovieTab</Text> 14 + <Text>SeenMovieTab</Text>
15 - </View> 15 + </View>
16 - ); 16 + );
17 - } 17 + }
18 } 18 }
19 19
20 const style = StyleSheet.create({ 20 const style = StyleSheet.create({
21 - container: {
22 - flex: 1,
23 - alignItems: 'center',
24 - justifyContent: 'center',
25 - }
26 -});
...\ No newline at end of file ...\ No newline at end of file
21 + container: {
22 + backgroundColor: "black",
23 + flex: 1,
24 + alignItems: "center",
25 + justifyContent: "center"
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 - 6 + static navigationOptions = {
7 - static navigationOptions = { 7 + tabBarIcon: ({ tintColor }) => (
8 - tabBarIcon: ({ tintColor }) => ( 8 + <Icon name="ios-star" style={{ color: tintColor }} />
9 - <Icon name='ios-star' style={{ color: tintColor }} /> 9 + )
10 - ) 10 + };
11 - } 11 + render() {
12 - render() { 12 + return (
13 - return ( 13 + <View style={style.container}>
14 - <View style={style.container}> 14 + <Text>WantToWatchTab</Text>
15 - <Text>WantToWatchTab</Text> 15 + </View>
16 - </View> 16 + );
17 - ); 17 + }
18 - }
19 } 18 }
20 19
21 const style = StyleSheet.create({ 20 const style = StyleSheet.create({
22 - container: {
23 - flex: 1,
24 - alignItems: 'center',
25 - justifyContent: 'center',
26 - }
27 -});
...\ No newline at end of file ...\ No newline at end of file
21 + container: {
22 + backgroundColor: "black",
23 + flex: 1,
24 + alignItems: "center",
25 + justifyContent: "center"
26 + }
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",
......