신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
f61b7bc7 1 parent 4b45cac5

project

Inline Side-by-side
Showing 7 changed files with 234 additions and 97 deletions
import React, { Component } from "react";
import { View, Text, StyleSheet, Button, Image } from "react-native";
import {
View,
Text,
StyleSheet,
Button,
Image,
TouchableOpacity
} from "react-native";
import { Icon } from "native-base";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import {
NavigationActions,
createStackNavigator,
withNavigation
withNavigation,
SafeAreaView,
ScrollView
} from "react-navigation";
import axios from "axios";
import { AsyncStorage } from "react-native";
......@@ -12,15 +22,17 @@ import { AsyncStorage } from "react-native";
export default class Detail extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-albums" style={{ color: tintColor }} />
<Icon name="ios-reorder" style={{ color: tintColor }} />
)
};
state = {
title: "1",
title: "",
overview: "",
release_date: "",
url: ""
url: "",
back: "",
key: ""
};
getDB = async search => {
......@@ -31,9 +43,10 @@ export default class Detail extends Component {
.then(response => {
this.setState({
title: response.data.results[0].title,
overview: response.data.results[0].overview,
overview: response.data.results[0].overview + "\n\n\n",
release_date: response.data.results[0].release_date,
url: response.data.results[0].poster_path
url: response.data.results[0].poster_path,
back: response.data.results[0].backdrop_path
});
});
};
......@@ -48,27 +61,28 @@ export default class Detail extends Component {
.then(json => this.setState({ items: json.items }));
};
_retrieveData = async item => {
try {
const value = await AsyncStorage.getItem(item);
if (value !== null) {
// We have data!!
console.log(value);
}
} catch (error) {
// Error retrieving data
}
};
_AllKeys = async () => {
const key = await AsyncStorage.getAllKeys();
console.log(key);
try {
this.state.key = await AsyncStorage.getAllKeys();
console.log(this.state.key);
} catch (error) {}
};
componentDidMount() {
// this._retrieveData("겨울왕국 2");
// this._AllKeys();
// AsyncStorage.removeItem("1");
this._AllKeys();
}
_onPressButton() {
this._AllKeys();
for (var value of this.state.key) {
if (value == this.state.title) {
AsyncStorage.removeItem(this.state.title);
console.log("1");
return;
}
}
AsyncStorage.setItem(this.state.title, this.state.title);
console.log("2");
}
render() {
......@@ -76,34 +90,54 @@ export default class Detail extends Component {
var temp = navigation.getParam("title", "");
this.getDB(temp);
return (
<View style={style.container}>
<Text>{this.state.title}</Text>
<Text>{this.state.release_date}</Text>
<Text>{this.state.overview}</Text>
<Text>{this.state.url}</Text>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<View style={styles.container1}>
<View style={styles.posterContainer}>
<View style={styles.backgroundContainer}>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original${this.state.url}`
uri: `https://image.tmdb.org/t/p/original${this.state.back}`
}}
style={styles.poster}
style={styles.posterBack}
/>
<Button
title="추가 "
onPress={() =>
AsyncStorage.setItem(this.state.title, this.state.title)
}
</View>
<View style={styles.overlay}>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original${this.state.url}`
}}
style={styles.posterFront}
/>
<View style={styles.posterTitle}>
<Text style={styles.Title}>{this.state.title}</Text>
</View>
</View>
</View>
</View>
<View style={styles.container2}>
<View>
<Text style={styles.name}>{this.state.title}</Text>
</View>
<View style={styles.lowContainer}>
<Text style={styles.overview}>{this.state.release_date}</Text>
<View style={styles.buttonLayout}>
<TouchableOpacity
// title="추가 "
onPress={() => this._onPressButton()}
>
<AntDesign name="star" color="yellow" style={styles.button} />
</TouchableOpacity>
</View>
</View>
<Text style={styles.overview}>{this.state.overview}</Text>
{/* <Text style={styles.overview}>{this.state.url}</Text> */}
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
//export default withNavigation(Detail);
......@@ -112,6 +146,78 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: "black"
},
container1: {
flex: 1,
backgroundColor: "black"
},
container2: {
flex: 2,
backgroundColor: "black"
},
backgroundContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: "flex-start"
},
overlay: {
flexDirection: "row"
// opacity: 0.5,
// backgroundColor: "#000000"
// alignItems: "center",
// justifyContent: "flex-end"
},
posterContainer: {
flex: 1,
alignItems: "flex-start",
justifyContent: "flex-end"
},
posterTitle: {
flex: 1,
alignItems: "flex-start",
justifyContent: "flex-end"
},
posterBack: {
// resizeMode: "cover",
// flex: 10,
width: "100%",
height: "100%"
// marginLeft: 10,
// paddingHorizontal: 50
// alignItems: "stretch",
// alignItems: "center"
// borderRadius: 7
},
posterFront: {
// resizeMode: "cover",
// alignItems: "center",
// justifyContent: "flex-end",
// flex: 10,
marginTop: 100,
marginLeft: 10,
marginBottom: 10,
width: 120,
height: 160
// marginLeft: 10,
// paddingHorizontal: 45,
// alignItems: "stretch",
// borderRadius: 7
},
buttonLayout: {
marginLeft: "auto",
marginRight: 20,
justifyContent: "space-around",
// marginBottom: 10,
flexDirection: "row"
},
button: {
fontSize: 30
// width: 30,
// height: 30
},
searchContainer: {
backgroundColor: "black",
marginLeft: 40,
......@@ -141,9 +247,9 @@ const styles = StyleSheet.create({
lowContainer: {
backgroundColor: "black",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
flexDirection: "row"
// justifyContent: "center",
// alignItems: "center"
},
leftContainer: {
flex: 1,
......@@ -167,21 +273,24 @@ const styles = StyleSheet.create({
backgroundColor: "black",
paddingBottom: 10
},
poster: {
resizeMode: "cover",
flex: 10,
width: "30%",
height: 160,
marginLeft: 10,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
Title: {
marginLeft: 25,
marginTop: 10,
marginBottom: 20,
fontSize: 25,
fontWeight: "bold",
color: "white"
},
name: {
marginLeft: 10,
marginTop: 10,
marginBottom: 5,
fontSize: 16,
color: "white"
},
overview: {
marginLeft: 5,
fontSize: 14,
color: "white"
}
......
......@@ -62,6 +62,7 @@ export default class Search extends Component {
};
render() {
console.log("1");
return (
<View style={styles.container}>
<View style={styles.container}>
......@@ -91,12 +92,20 @@ export default class Search extends Component {
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail", {
title: result.title
})
}
>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
}}
style={styles.poster}
/>
</TouchableOpacity>
}
</CardItem>
</View>
......
......@@ -7,6 +7,7 @@ import {
AsyncStorage,
SafeAreaView,
ScrollView,
RefreshControl,
Alert,
Image
} from "react-native";
......@@ -32,7 +33,7 @@ export default class App extends Component {
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-star" style={{ color: tintColor }} />
<Icon name="ios-star-outline" style={{ color: tintColor }} />
)
};
......@@ -115,54 +116,44 @@ export default class App extends Component {
render() {
return (
<View style={styles.container}>
{/* <TouchableOpacity onPress={this.setData.bind(this)}> */}
{/* 버튼 누르면 리스트 갱신됩니다 */}
{/* <Image source={require("../../assets/refresh.png")} /> */}
{/* <Text style={styles.textStyle}>Refresh Button</Text> */}
{/* </TouchableOpacity> */}
{/* <Text style={styles.textStyle}>{this.state.result[0][0]}</Text> */}
<SafeAreaView>
<ScrollView>
<Card>
{/* <View>
{this.state.list.map((item, i) => (
<View style={styles.lowContainer}>
<View style={styles.halfContainer}>
<Text style={styles.textStyle} key={i}>
{item}
</Text>
</View>
<View style={styles.halfContainer}>
<Text style={styles.textStyle} key={i}>
{item}
</Text>
</View>
</View>
))}
</View> */}
{/* {this.state.imgurls.map((val, index) => <Well data={val} desc={this.state.li[index]} key={index}/> */}
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<View style={styles.container}>
{/* <Card> */}
{this.state.results.map(item => (
<View style={styles.lowContainer}>
<View>
<CardItem>
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("Detail", {
title: item.title
})
}
>
<Image
style={styles.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${item.poster_path}`
uri: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`
}}
/>
</TouchableOpacity>
}
</CardItem>
<CardItem>
<View>
</View>
<View style={styles.rightContainer}>
<CardItem style={styles.container}>
<View style={styles.container}>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</CardItem>
</View>
</View>
))}
</Card>
{/* </Card> */}
</View>
</ScrollView>
</SafeAreaView>
</View>
......@@ -178,33 +169,50 @@ const styles = StyleSheet.create({
// justifyContent: "center"
},
lowContainer: {
marginLeft: 15,
backgroundColor: "black",
flex: 1,
flexDirection: "row",
backgroundColor: "black",
// alignContent: "space-around",
justifyContent: "center",
alignItems: "center"
// marginLeft: 10,
// marginTop: 10,
// marginBottom: 20
},
halfContainer: {
leftContainer: {
flex: 1,
backgroundColor: "yellow",
backgroundColor: "black",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2,
backgroundColor: "black"
},
rightUpContainer: {
flex: 1,
backgroundColor: "black",
paddingTop: 35,
justifyContent: "center",
marginLeft: 20
},
rightDownContainer: {
flex: 3,
backgroundColor: "black",
paddingBottom: 10
},
poster: {
// resizeMode: "cover",
resizeMode: "cover",
flex: 10,
width: "40%",
height: 120,
height: 80,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
textStyle: {
fontSize: 25,
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
......
No preview for this file type
메인 화면에서는
영화진흥위원회에서 제공하는 Open API를 통해 어제 날짜 기준으로 영화 순위를 1위부터 10위까지 받아왔고,
해당 API가 따로 포스터 이미지를 제공하지 않아 더 무비라는 해외 사이트에서 포스터와 줄거리를 가져왔습니다.
각 영화 리스트를 클릭하면 영화의 상세 페이지로 넘어가 자세한 정보를 볼 수 있고, 옆에 보시는 즐겨찾기 버튼을 통해 나중에 볼 영화 목록를 등록할 수 있습니다.
My movie탭을 누르면 영화가 추가 된것을 볼 수 있습니다.
밑에 검색탭을 보시면 영화 이름 검색시 해당 단어가 들어간 영화의 정보를 받아 오는 것을 볼 수 있습니다,
이상으로 발표 마치겠습니다.
\ No newline at end of file