“Hojin

Edit GUI

This diff is collapsed. Click to expand it.
......@@ -63,8 +63,9 @@ export default class Search extends Component {
render() {
return (
<View>
<View style={styles.container}>
<View style={styles.container}>
<View style={styles.searchContainer}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
......@@ -73,18 +74,22 @@ export default class Search extends Component {
value={this.state.typing}
onChangeText={typing => this.setState({ typing })}
/>
<TouchableOpacity onPress={() => this.searching(this.state.typing)}>
<TouchableOpacity
onPress={() => this.searching(this.state.typing)}
>
<Icon name="ios-search" />
</TouchableOpacity>
</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>
<CardItem style={styles.container}>
{
<Image
source={{
......@@ -100,11 +105,11 @@ export default class Search extends Component {
<Text style={styles.name}>{result.title}</Text>
</View>
<View style={styles.rightDownContainer}>
<CardItem>
<CardItem style={styles.container}>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...`}
: `${result.overview.substring(0, 57)}...\n`}
</Text>
</CardItem>
</View>
......@@ -112,17 +117,25 @@ export default class Search extends Component {
</View>
))}
</Card>
</View>
</ScrollView>
</SafeAreaView>
</View>
</View>
</View>
);
}
}
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 }} />
<Icon name="ios-albums" style={{ color: tintColor }} />
)
}
};
render() {
return (
<View style={style.container}>
......@@ -19,8 +19,9 @@ export default class SeenMovieTab extends Component {
const style = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1,
alignItems: 'center',
justifyContent: 'center',
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 }} />
<Icon name="ios-star" style={{ color: tintColor }} />
)
}
};
render() {
return (
<View style={style.container}>
......@@ -20,8 +19,9 @@ export default class WantToWatchTab extends Component {
const style = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1,
alignItems: 'center',
justifyContent: 'center',
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",
......