신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
신승민
997b12fd 1 parent e01b535c

Search UI and Poster

Inline Side-by-side
Showing 3 changed files with 400 additions and 35 deletions
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image} from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import { View, Text, StyleSheet, Image } from "react-native";
import { Icon } from "native-base";
import { AsyncStorage } from "react-native";
import axios from "axios";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
let uri1 = "";
export default class MovieRankingTab extends Component {
state = {
isLoading: true,
info: [],
name0: [],
name1: [],
name2: [],
name3: [],
name4: [],
name5: [],
name6: [],
name7: [],
name8: [],
name9: [],
imgur0: [],
imgurl: [],
imgur2: [],
imgur3: [],
imgur4: [],
imgur5: [],
imgur6: [],
imgur7: [],
imgur8: [],
imgur9: []
};
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-trophy' style={{ color: tintColor }} />
<Icon name="ios-trophy" style={{ color: tintColor }} />
)
};
getNaverApi = async () => {
fetch("https://openapi.naver.com/v1/search/movie.json?query='겨울왕국 2'", {
getMovieList = async () => {
axios
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
)
.then(
response => {
this.setState({
name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
name1: response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm,
name2: response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm,
name3: response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm,
name4: response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm,
name5: response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm,
name6: response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm,
name7: response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm,
name8: response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm,
name9: response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm,
info: response.data.boxOfficeResult.dailyBoxOfficeList
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
})
}
)
.then(response => response.json())
.then(json => {
console.log(json.items[0].image);
this.setState({
imgurl0: json.items[0].image
});
};
getMovieList = async () => {
axios
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[1].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => {
for (var i = 0; i < 10; i++) {
console.log(
response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
);
.then(response => response.json())
.then(json => {
this.setState({
imgurl1: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[2].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl2: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl3: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl4: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl5: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl6: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl7: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl8: json.items[0].image
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
fetch(
`https://openapi.naver.com/v1/search/movie.json?query='${name}'`,
{
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
}
)
.then(response => response.json())
.then(json => {
this.setState({
imgurl9: json.items[0].image
});
});
}
})
// {
// for (var i = 0; i < 10; i++) {
// console.log(
// response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
// );
// }
// }
)
.catch(error => {
console.log(error);
});
};
componentDidMount() {
this.getMovieList();
this.getNaverApi();
}
render() {
return (
<View style={style.container}>
<Text>MovieRanking</Text>
<Image
style = {{height:'25%',width: '25%'}}
source={{uri : "https://ssl.pstatic.net/imgmovie/mdi/mit110/1368/136873_P18_100537.jpg" }}/>
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl0}` }}
/>
<Text>{this.state.name0}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl1}` }}
/>
<Text>{this.state.name1}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl2}` }}
/>
<Text>{this.state.name2}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl3}` }}
/>
<Text>{this.state.name3}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl4}` }}
/>
<Text>{this.state.name4}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl5}` }}
/>
<Text>{this.state.name5}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl6}` }}
/>
<Text>{this.state.name6}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl7}` }}
/>
<Text>{this.state.name7}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl8}` }}
/>
<Text>{this.state.name8}</Text>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl9}` }}
/>
<Image
style={{ height: "25%", width: "25%" }}
source={{ uri: `${this.state.imgurl9}` }}
/>
<Text>{this.state.name9}</Text>
</View>
);
}
......@@ -64,7 +302,10 @@ export default class MovieRankingTab extends Component {
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center"
},
splitContainer: {
flex: 1
}
});
\ No newline at end of file
......
import React, { Component } from 'react';
import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { Icon } from 'native-base';
import axios from "axios";
import { AsyncStorage } from "react-native";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
export default class Search extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-search' style={{ color: tintColor }} />
)
}
state = {
movieName: "",
imgurl: []
};
/*
getNaverApi = async () => {
fetch(`https://openapi.naver.com/v1/search/movie.json?query=${this.state.movieName}`, {
headers: {
"X-Naver-Client-Id": NAVER_CLIENT_ID,
"X-Naver-Client-Secret": NAVER_CLIENT_SECRET
}
})
.then(response => response.json())
.then(json => {
this.setState({
imgurl: json.items[0].image
});
});
getMovieList = async () => {
axios
.get(
`http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=20191129`
)
.then(response => {
for (var i = 0; i < 10; i++) {
console.log(
response.data.boxOfficeResult.dailyBoxOfficeList[i].movieNm
);
}
})
.catch(error => {
console.log(error);
});
};
}
componentDidMount() {
this.getNaverApi();
}
*/
addinput = () => {
this.setState(
)
}
handleSearchUpdate = text => {
this.setState({
searchTerm: text
});
};
render() {
return (
<View style={styles.container}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder='Search'
autoCorrect={ false }
value = {this.state.movieName}
onChangeText= { (movieName) => this.setState({movieName})}
/>
<TouchableOpacity on PressOut = {this.add}>
<Icon name='ios-search'/>
</TouchableOpacity>
</View>
<Text>
{this.state.imgurl}
</Text>
</View>
)
}
controlMovie = text => {
this.setState({
movieName: text
});
}
}
const styles = StyleSheet.create({
container: {
marginLeft: 50,
marginRight: 50,
},
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'
}
});
\ No newline at end of file
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Icon } from 'native-base'; // 추가된 코드
import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import SeenMovieTab from './AppTabNavigator/MovieRankingTab';
import MovieRankingTab from './AppTabNavigator/WantToWatchTab';
import WantToWatchTab from './AppTabNavigator/SeenMovieTab';
import Search from './/AppTabNavigator/Search';
import { Platform } from 'react-native'
//import { Ionicons } from '@expo/vector-icons';
const AppTabNavigator = createMaterialTopTabNavigator({
"SeenMovieTab":{ screen: SeenMovieTab },
"MovieRankingTab":{ screen: MovieRankingTab },
"WantToWatchTab":{ screen: WantToWatchTab }
SeenMovieTab:{ screen: SeenMovieTab },
MovieRankingTab:{ screen: MovieRankingTab },
WantToWatchTab:{ screen: WantToWatchTab },
Search: { screen: Search }
}, {
animationEnabled: true,
swipeEnabled: true,
......@@ -41,9 +43,9 @@ export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: 'PoketMovie',
headerRight: <Icon name='ios-search' style={{ paddingRight:10 }}/>,
}
title: 'PoketMovie'
}
render() {
return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
......@@ -55,5 +57,5 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
}
});
\ No newline at end of file
......