신승민 / 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 69 additions and 38 deletions
This diff is collapsed. Click to expand it.
...@@ -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",
......