신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
신승민
f7ea7781 1 parent b9cbd619

Final

Expand all
Inline Side-by-side
Showing 10 changed files with 397 additions and 158 deletions
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import MainScreen from "./Components/MainScreen";
import Detail from "./Components/AppTabNavigator/Detail"
// import MovieInfo from "./Components/MovieInfo";
const AppStackNavigator = createStackNavigator({
Main: {
screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
},
Datail:{
screen: Detail
}
});
export default createAppContainer(AppStackNavigator);
......
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { Icon } from 'native-base';
import { NavigationActions, createStackNavigator, withNavigation } from 'react-navigation';
import MovieRankingTab from './MovieRankingTab'
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity
} from "react-native";
import { Icon } from "native-base";
import { AntDesign } from "@expo/vector-icons";
import {
SafeAreaView,
ScrollView
} from "react-navigation";
import axios from "axios";
import { AsyncStorage } from "react-native";
getDB = async search => {
export default class Detail extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-reorder" style={{ color: tintColor }} />
)
};
state = {
title: "",
overview: "",
release_date: "",
url: "",
back: "",
key: ""
};
getDB = async search => {
axios
.get(
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${search}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ results: response.data.results });
console.log(response.data.results);
this.setState({
title: response.data.results[0].title,
overview: response.data.results[0].overview + "\n\n\n",
release_date: response.data.results[0].release_date,
url: response.data.results[0].poster_path,
back: response.data.results[0].backdrop_path
});
});
};
getNaverApi = async search => {
fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
headers: {
......@@ -26,40 +57,214 @@ getDB = async search => {
.then(json => this.setState({ items: json.items }));
};
searching = typing => {
this.setState({
keyword: typing,
typing: ""
});
this.getDB(typing);
};
_AllKeys = async() => {
try {
this.state.key = await AsyncStorage.getAllKeys();
console.log(this.state.key)
} catch (error){
}
}
componentDidMount() {
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")
}
export default class Detail extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-albums" style={{ color: tintColor }} />
)
};
render() {
const { navigation } = this.props;
return (
<View style={style.container}>
<Text>
{navigation.getParam("name")}
</Text>
render() {
const { navigation } = this.props;
var temp = navigation.getParam("title", "");
this.getDB(temp);
return (
<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.back}`
}}
style={styles.posterBack}
/>
</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
onPress={() => this._onPressButton()}
>
<AntDesign name="star" color="yellow" style={styles.button} />
</TouchableOpacity>
</View>
</View>
<Text style={styles.overview}>{this.state.overview}</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
//export default withNavigation(Detail);
\ No newline at end of file
const styles = StyleSheet.create({
container: {
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"
},
posterContainer: {
flex: 1,
alignItems: "flex-start",
justifyContent: "flex-end"
},
posterTitle: {
flex: 1,
alignItems: "flex-start",
justifyContent: "flex-end"
},
posterBack: {
width: "100%",
height: "100%"
},
posterFront: {
marginTop: 100,
marginLeft: 10,
marginBottom: 10,
width: 120,
height: 160
},
buttonLayout: {
marginLeft: "auto",
marginRight: 20,
justifyContent: "space-around",
flexDirection: "row"
},
button: {
fontSize: 30
},
searchContainer: {
backgroundColor: "black",
marginLeft: 40,
marginRight: 40
},
input: {
borderRadius: 10,
backgroundColor: "#FFF",
paddingLeft: 10,
paddingRight: 10,
height: 50,
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
borderBottomColor: "#bbb",
borderBottomWidth: StyleSheet.hairlineWidth
},
inputText: {
flex: 1
},
addBtn: {
color: "#4169E1"
},
imagecontainer: {
flex: 1
},
lowContainer: {
backgroundColor: "black",
flex: 1,
flexDirection: "row"
},
leftContainer: {
flex: 1,
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
},
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"
}
});
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -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,16 @@ 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>
......@@ -205,4 +210,4 @@ const styles = StyleSheet.create({
fontSize: 14,
color: "white"
}
});
});
\ No newline at end of file
......
import React, { Component } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import { View, Text, StyleSheet } from "react-native";
import { Icon } from "native-base";
import { withNavigation } from 'react-navigation';
import { navigation, StackActions, NavigationActions } from 'react-navigation';
import 'react-native-gesture-handler'
import Detail from './Detail'
export default class SeenMovieTab extends Component {
static navigationOptions = {
......@@ -17,7 +14,6 @@ export default class SeenMovieTab extends Component {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
<Button title = 'hi' onPress = { () => this.props.navigation.navigate('Detail')} />
</View>
);
}
......
import React, { Component } from 'react';
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
AsyncStorage,
ScrollView,
Image,
} from 'react-native';
import { Icon } from "native-base";
StyleSheet,
Text,
View,
TouchableOpacity,
AsyncStorage,
SafeAreaView,
ScrollView,
RefreshControl,
Alert,
Image
} from "react-native";
import { Card, CardItem, Icon } from "native-base";
import axios from "axios";
import MovieRankingTab from "./MovieRankingTab";
import { symbol } from "prop-types";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
export default class App extends Component {
state = {
list: "", //영화 제목 list
date: "", //날짜
imgurl0: [], //이미지
name0: [], //제목
};
state = {
list: [], //영화 제목 list
date: "", //날짜
names: [], // api로 받아오 영화 제목
imgurls: [], //이미지
name0: [], //제목
results: [], // json 오브젝트
title: "",
dummy: 1
};
//날짜 정하기
componentDidMount() {
var day = new Date().getDate() - 1; // 어제 날짜
if (day == 1) {
day = 30;
} else if (day < 10) {
day = "0" + day;
}
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
var date = year + "" + month + day;
this.getMovieList(date);
this.setData();
}
getMovieList = async date => {
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-star-outline" style={{ color: tintColor }} />
)
};
//Data 설정함수
setData = async () => {
try {
this.state.list = await AsyncStorage.getAllKeys();
for (var i = 0; i < this.state.list.length; i++) {
axios
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
)
.then(
response => {
this.setState({
//영화 제목
name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
});
temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl0: json.items[0].image
});
});
}
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${this.state.list[i]}&language=ko-KR&page=1`
)
.catch(error => {
console.log(error);
});
};
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-star' style={{ color: tintColor }} />
)
}
.then(response => {
var joined = this.state.imgurls.concat(
response.data.results[0].poster_path
);
var result = this.state.results.concat(response.data.results[0]);
//Data 설정함수
setData = async () => {
try {
this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다
//console.log(this.state.list); //잘 뜨는데??
}
catch (error) {
alert(error)
}
this.setState({
imgurls: joined,
results: result
});
console.log("list", this.state.list);
console.log("imgurls", this.state.imgurls);
});
}
} catch (error) {
alert(error);
}
};
componentDidMount() {
this.setData();
}
render() {
return (
render() {
return (
<View style={styles.container}>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.container}>
<View style={styles.container}>
<TouchableOpacity onPress={this.componentDidMount.bind(this)}>
{/* 눌러용 누르면 리스트 갱신됩니다 */}
<Text style={styles.textStyle}>눌러용</Text>
</TouchableOpacity>
<Text style={styles.textStyle}>{this.state.list}</Text>
{this.state.results.map(item => (
<View style={styles.lowContainer}>
<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.backdrop_path}`
}}
/>
</TouchableOpacity>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<CardItem style={styles.container}>
<View style={styles.container}>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</CardItem>
</View>
</View>
))}
</View>
);
}
</ScrollView>
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1
},
lowContainer: {
marginLeft: 15,
backgroundColor: "black",
flex: 1,
alignItems: "center",
justifyContent: "center"
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
leftContainer: {
flex: 1,
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",
flex: 10,
width: "40%",
height: 80,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
textStyle: {
fontSize: 25,
color: "white",
},
});
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
\ No newline at end of file
......
import React, { Component } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
......@@ -9,15 +8,6 @@ import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
import Search from ".//AppTabNavigator/Search";
import Detail from "./AppTabNavigator/Detail"
import { Platform } from "react-native";
import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
state = {
hi:""
}
props = {
bye : ""
}
const AppTabNavigator = createMaterialTopTabNavigator(
{
......@@ -28,6 +18,7 @@ const AppTabNavigator = createMaterialTopTabNavigator(
Detail: { screen: Detail }
},
{
animationEnabled: true,
swipeEnabled: true,
......@@ -54,10 +45,8 @@ const AppTabContainet = createAppContainer(AppTabNavigator);
export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: " Poket Movie",
title: " Pocket Movie",
headerStyle: {
backgroundColor: "black"
},
......
No preview for this file type