신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
ca4aaf43 1 parent 89606a8e

add detail

Inline Side-by-side
Showing 4 changed files with 508 additions and 145 deletions
import React, { Component } from "react";
import { View, Text, StyleSheet, Button, Image } from "react-native";
import { Icon } from "native-base";
import {
NavigationActions,
createStackNavigator,
withNavigation
} from "react-navigation";
import axios from "axios";
import { AsyncStorage } from "react-native";
export default class Detail extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-albums" style={{ color: tintColor }} />
)
};
state = {
title: "1",
overview: "",
release_date: "",
url: ""
};
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({
title: response.data.results[0].title,
overview: response.data.results[0].overview,
release_date: response.data.results[0].release_date,
url: response.data.results[0].poster_path
});
});
};
getNaverApi = async search => {
fetch(`https://openapi.naver.com/v1/search/movie.json?query="${search}"`, {
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
})
.then(response => response.json())
.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);
};
componentDidMount() {
// this._retrieveData("겨울왕국 2");
// this._AllKeys();
// AsyncStorage.removeItem("1");
}
render() {
const { navigation } = this.props;
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>
<Image
source={{
uri: `https://image.tmdb.org/t/p/original${this.state.url}`
}}
style={styles.poster}
/>
<Button
title="추가 "
onPress={() =>
AsyncStorage.setItem(this.state.title, this.state.title)
}
/>
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
//export default withNavigation(Detail);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black"
},
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",
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: "30%",
height: 160,
marginLeft: 10,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
},
name: {
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14,
color: "white"
}
});
......@@ -12,7 +12,7 @@ import {
import { Icon } from "native-base";
import { AsyncStorage } from "react-native";
import axios from "axios";
import WantToWatchTab from './WantToWatchTab';
import WantToWatchTab from "./WantToWatchTab";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
......@@ -213,14 +213,15 @@ export default class MovieRankingTab extends Component {
var date = year + "" + month + day;
this.getMovieList(date);
}
//눌렀을 때 저장함수
_onPressButton(temp) {
//this.state.list = ""; //초기화(On Off 기능으로 짜놨습니당, 누적되는거 보고싶으면 이부분 주석달면 돼여)
Alert.alert(temp);//메시지 띄우고
this.state.list = this.state.list + temp + '\n'; //list 누적해준다(endl으로 구분)
console.log(this.state.list);//콘솔에 log 띄운다
AsyncStorage.setItem('MovieLists', this.state.list); //DB에 저장한다
// Alert.alert(temp); //메시지 띄우고
// this.state.list = this.state.list + temp + "\n"; //list 누적해준다(endl으로 구분)
// console.log(this.state.list); //콘솔에 log 띄운다
// AsyncStorage.setItem(`${temp}`, temp); //DB에 저장한다
this.props.navigation.navigate("Detail", { title: temp });
//WantToWatchTab.render(); //새로고침
}
......@@ -261,9 +262,9 @@ export default class MovieRankingTab extends Component {
)}
>
<Text style={style.overview}>
{this.state.overview0.length < 70
{this.state.overview0.length < 60
? `${this.state.overview0}`
: `${this.state.overview0.substring(0, 65)}...\n `}
: `${this.state.overview0.substring(0, 57)}...\n `}
</Text>
</TouchableOpacity>
</View>
......@@ -356,6 +357,47 @@ export default class MovieRankingTab extends Component {
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name3}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name3}`
)}
>
<Text style={style.name}>{this.state.name3}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name3}`
)}
>
<Text style={style.overview}>
{this.state.overview3.length < 60
? `${this.state.overview3}`
: `${this.state.overview3.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 5위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
>
<Image
......@@ -381,7 +423,7 @@ export default class MovieRankingTab extends Component {
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
`${this.state.name1}`
)}
>
<Text style={style.overview}>
......@@ -393,15 +435,16 @@ export default class MovieRankingTab extends Component {
</View>
</View>
</View>
{/* 6위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
onPress={this._onPressButton.bind(this, `${this.state.name5}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
}}
/>
</TouchableOpacity>
......@@ -411,37 +454,38 @@ export default class MovieRankingTab extends Component {
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name5}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
<Text style={style.name}>{this.state.name5}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name5}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
<Text style={style.overview}>
{this.state.overview5.length < 60
? `${this.state.overview5}`
: `${this.state.overview5.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 7위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
onPress={this._onPressButton.bind(this, `${this.state.name6}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
}}
/>
</TouchableOpacity>
......@@ -451,37 +495,38 @@ export default class MovieRankingTab extends Component {
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name6}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
<Text style={style.name}>{this.state.name6}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name6}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
<Text style={style.overview}>
{this.state.overview6.length < 60
? `${this.state.overview6}`
: `${this.state.overview6.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 8위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
onPress={this._onPressButton.bind(this, `${this.state.name7}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
}}
/>
</TouchableOpacity>
......@@ -491,37 +536,38 @@ export default class MovieRankingTab extends Component {
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name7}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
<Text style={style.name}>{this.state.name7}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name7}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
<Text style={style.overview}>
{this.state.overview7.length < 60
? `${this.state.overview7}`
: `${this.state.overview7.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 9위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
onPress={this._onPressButton.bind(this, `${this.state.name8}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
}}
/>
</TouchableOpacity>
......@@ -531,23 +577,64 @@ export default class MovieRankingTab extends Component {
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name8}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
<Text style={style.name}>{this.state.name8}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
`${this.state.name8}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
<Text style={style.overview}>
{this.state.overview8.length < 60
? `${this.state.overview8}`
: `${this.state.overview8.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* 10위 */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name9}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name9}`
)}
>
<Text style={style.name}>{this.state.name9}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name9}`
)}
>
<Text style={style.overview}>
{this.state.overview9.length < 60
? `${this.state.overview9}`
: `${this.state.overview9.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</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,
Alert,
Image
} from "react-native";
import { Card, CardItem, Icon } from "native-base";
import axios from "axios";
import MovieRankingTab from './MovieRankingTab';
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: ""
};
//날짜 정하기
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();
}
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-star" style={{ color: tintColor }} />
)
};
getMovieList = async date => {
//Data 설정함수
setData = async () => {
try {
//요거 바꿔봤다
// this.state.list = await AsyncStorage.getItem("movieName"); //List에 받아온다
// console.log(this.state.list); //잘 뜨는데??
// const value = await AsyncStorage.getItem("@movieName:key");
// if (value !== null) {
// We have data!!
// await AsyncStorage.getAllKeys().then(console.log);
this.state.list = await AsyncStorage.getAllKeys();
// this.setState({
// name0: this.state.list[0].name
// });
// console.log("확인용", this.state.list);
// var cnt = this.state.list.length;
// console.log(cnt);
// var temp1 = [];
// var temp2 = [];
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);
.then(response => {
var joined = this.state.imgurls.concat(
response.data.results[0].poster_path
);
// var joined = response.data.results[0].poster_path;
// var name = response.data.results[0].title;
// var name = this.state.list.concat(response.data.results[0].title);
// temp1.push(joined);
// temp2.push(name);
// var temp = this.state.list.concat(response.data.results[0].title);
var result = this.state.results.concat(response.data.results[0]);
// var temp = [joined, name];
// var tempObj = this.state.results.concat(temp);
// this.setState({ imgurls: joined, names: name, results: tempObj });
this.setState({
imgurls: joined,
results: result
// results: [this.state.list, imgurls]
});
console.log("list", this.state.list);
console.log("imgurls", this.state.imgurls);
// console.log("results", this.state.imgurls);
// var temp = [];
// console.log(newobj);
// console.log(joined);
// console.log(response.data.results[0].title);
// console.log(response.data.results[0].poster_path);
// console.log(response.data.results);
});
};
//네비게이션 바
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-star' style={{ color: tintColor }} />
)
}
// var newobj = [temp1, temp2];
// this.setState({ results: newobj });
// console.log(newobj);
//Data 설정함수
setData = async () => {
try {
//요거 바꿔봤다
this.state.list = await AsyncStorage.getItem('MovieLists'); //List에 받아온다
console.log(this.state.list); //잘 뜨는데??
}
catch (error) {
alert(error)
}
// var a = [1, 3, 4];
// var b = [3, 4, 5];
// var newobj = [a, b];
// var newobj = [...this.state.imgurls, ...this.state.names];
// console.log(newobj);
}
} catch (error) {
alert(error);
}
};
componentDidMount() {
this.setData();
// var cnt = this.state.list.length;
// console.log(cnt);
// this.getDB();
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.componentDidMount.bind(this)}>
{/* 버튼 누르면 리스트 갱신됩니다 */}
<Image source = {require('../../assets/refresh.png')} />
{/* <Text style={styles.textStyle}>Refresh Button</Text> */}
</TouchableOpacity>
<Text style={styles.textStyle}>{this.state.list}</Text>
</View>
);
}
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}/> */}
{this.state.results.map(item => (
<View style={styles.lowContainer}>
<View>
<CardItem>
{
<Image
style={styles.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${item.poster_path}`
}}
/>
}
</CardItem>
<CardItem>
<View>
<Text style={styles.textStyle}>{item.title}</Text>
</View>
</CardItem>
</View>
</View>
))}
</Card>
</ScrollView>
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1
// alignItems: "center",
// justifyContent: "center"
},
lowContainer: {
flex: 1,
flexDirection: "row",
backgroundColor: "black",
// alignContent: "space-around",
justifyContent: "center",
alignItems: "center"
// marginLeft: 10,
// marginTop: 10,
// marginBottom: 20
},
halfContainer: {
flex: 1,
alignItems: "center",
justifyContent: "center"
backgroundColor: "yellow",
justifyContent: "center",
alignItems: "center"
},
poster: {
// resizeMode: "cover",
flex: 10,
width: "40%",
height: 120,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
textStyle: {
fontSize: 25,
color: "white",
},
color: "white"
}
});
......
import React, { Component } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { Icon } from "native-base"; // 추가된 코드
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
......@@ -8,18 +7,19 @@ import SeenMovieTab from "./AppTabNavigator/MovieRankingTab";
import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
import Search from ".//AppTabNavigator/Search";
import Detail from "./AppTabNavigator/Detail";
import { Platform } from "react-native";
import { black } from "ansi-colors";
import { colors } from "react-native-elements";
//import { Ionicons } from '@expo/vector-icons';
import { setRecoveryProps } from "expo/build/ErrorRecovery/ErrorRecovery";
const AppTabNavigator = createMaterialTopTabNavigator(
{
SeenMovieTab: { screen: SeenMovieTab },
MovieRankingTab: { screen: MovieRankingTab },
WantToWatchTab: { screen: WantToWatchTab },
Search: { screen: Search }
Search: { screen: Search },
Detail: { screen: Detail }
},
{
animationEnabled: true,
swipeEnabled: true,
......