신승민 / 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 {
render() {
return (
<View>
<View style={styles.container}>
<View style={styles.container}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder="Search"
autoCorrect={false}
value={this.state.typing}
onChangeText={typing => this.setState({ typing })}
/>
<TouchableOpacity onPress={() => this.searching(this.state.typing)}>
<Icon name="ios-search" />
</TouchableOpacity>
<View style={styles.searchContainer}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder="Search"
autoCorrect={false}
value={this.state.typing}
onChangeText={typing => this.setState({ typing })}
/>
<TouchableOpacity
onPress={() => this.searching(this.state.typing)}
>
<Icon name="ios-search" />
</TouchableOpacity>
</View>
</View>
</View>
<SafeAreaView>
<ScrollView>
<Card>
{this.state.results.map(result => (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem>
{
<Image
source={{
uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
}}
style={styles.poster}
/>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<View style={styles.rightUpContainer}>
<Text style={styles.name}>{result.title}</Text>
</View>
<View style={styles.rightDownContainer}>
<CardItem>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...`}
</Text>
</CardItem>
</View>
</View>
<View style={styles.container}>
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Card>
{this.state.results.map(result => (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<Image
source={{
uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
}}
style={styles.poster}
/>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<View style={styles.rightUpContainer}>
<Text style={styles.name}>{result.title}</Text>
</View>
<View style={styles.rightDownContainer}>
<CardItem style={styles.container}>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...\n`}
</Text>
</CardItem>
</View>
</View>
</View>
))}
</Card>
</View>
))}
</Card>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
</View>
</View>
</View>
);
}
......@@ -121,8 +129,13 @@ export default class Search extends Component {
const styles = StyleSheet.create({
container: {
marginLeft: 50,
marginRight: 50
flex: 1,
backgroundColor: "black"
},
searchContainer: {
backgroundColor: "black",
marginLeft: 40,
marginRight: 40
},
input: {
borderRadius: 10,
......@@ -146,29 +159,32 @@ const styles = StyleSheet.create({
flex: 1
},
lowContainer: {
backgroundColor: "black",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
alignItems: "center"
},
leftContainer: {
flex: 1,
backgroundColor: "black",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2
flex: 2,
backgroundColor: "black"
},
rightUpContainer: {
flex: 1,
paddingTop: 20,
backgroundColor: "black",
paddingTop: 35,
justifyContent: "center",
marginLeft: 10
marginLeft: 20
},
rightDownContainer: {
flex: 3,
paddingTop: 20,
backgroundColor: "black",
paddingBottom: 10
},
poster: {
......@@ -176,18 +192,17 @@ const styles = StyleSheet.create({
flex: 10,
width: "30%",
height: 160,
marginLeft: 10,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
},
content: {
flex: 1,
flexDirection: "row"
},
name: {
fontSize: 16
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14
fontSize: 14,
color: "white"
}
});
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Icon } from "native-base";
export default class SeenMovieTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-albums' style={{ color: tintColor }} />
)
}
render() {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
</View>
);
}
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-albums" style={{ color: tintColor }} />
)
};
render() {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
\ No newline at end of file
container: {
backgroundColor: "black",
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Icon } from "native-base";
export default class WantToWatchTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-star' style={{ color: tintColor }} />
)
}
render() {
return (
<View style={style.container}>
<Text>WantToWatchTab</Text>
</View>
);
}
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-star" style={{ color: tintColor }} />
)
};
render() {
return (
<View style={style.container}>
<Text>WantToWatchTab</Text>
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
\ No newline at end of file
container: {
backgroundColor: "black",
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
......
......@@ -9,6 +9,8 @@ import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
import Search from ".//AppTabNavigator/Search";
import { Platform } from "react-native";
import { black } from "ansi-colors";
import { colors } from "react-native-elements";
//import { Ionicons } from '@expo/vector-icons';
const AppTabNavigator = createMaterialTopTabNavigator(
......@@ -26,13 +28,13 @@ const AppTabNavigator = createMaterialTopTabNavigator(
style: {
...Platform.select({
android: {
backgroundColor: "white"
backgroundColor: "black"
}
})
},
iconStyle: { height: 30 },
activeTintColor: "#000",
inactiveTintColor: "#d1cece",
activeTintColor: "white",
inactiveTintColor: "dimgray",
upperCaseLabel: false,
showLabel: false,
showIcon: true
......@@ -46,7 +48,14 @@ export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: "PoketMovie"
title: " Poket Movie",
headerStyle: {
backgroundColor: "black"
},
headerTintColor: "white",
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
......
No preview for this file type
No preview for this file type
{
"main": "node_modules/expo/AppEntry.js",
"rnpm": {
"assets": [
"./assets/fonts"
]
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
......@@ -10,6 +15,7 @@
"dependencies": {
"axios": "^0.19.0",
"expo": "^35.0.0",
"expo-font": "~7.0.0",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-dom": "16.8.3",
......