신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
f1084289 1 parent 5f449598

add listview

Expand all
Inline Side-by-side
Showing 9 changed files with 265 additions and 220 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 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 MovieInfo from "./Components/MovieInfo";
const AppStackNavigator = createStackNavigator({
Main:{
Main: {
screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
}
});
export default createAppContainer(AppStackNavigator);
\ No newline at end of file
export default createAppContainer(AppStackNavigator);
......
This diff is collapsed. Click to expand it.
import React, { Component } from 'react';
import { Image, View, Button, Text, TextInput, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import {
Image,
View,
Text,
TextInput,
StyleSheet,
TouchableOpacity,
SafeAreaView,
ScrollView
} from "react-native";
import { Card, CardItem, 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 = {
typing: "",
keyword: "",
items: [[0],[0]]
};
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-search" style={{ color: tintColor }} />
)
};
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}))};
handleSearchUpdate = text => {
this.setState({
searchTerm: text
});
};
searching = (typing) => {
this.setState({
keyword: typing,
typing: ""
})
this.getNaverApi(typing)
}
viewimage(){
return this.state.items.map( item =>
<Image style={styles.imagecontainer}
style={{ height: "50%", width: "50%" }}
source={{ uri: `${item.image}`}}
/>)
}
state = {
typing: "",
keyword: "",
items: [],
info: [],
results: []
};
render() {
return (
<View style={styles.container}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder='Search'
autoCorrect={ false }
value = {this.state.typing}
onChangeText= { (typing) => this.setState({typing})}
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);
});
};
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 }));
};
searching = typing => {
this.setState({
keyword: typing,
typing: ""
});
this.getDB(typing);
};
render() {
return (
<View>
<View style={styles.container}>
<View style={styles.input}>
<TextInput
style={styles.inputText}
placeholder="Search"
autoCorrect={false}
value={this.state.typing}
onChangeText={typing => this.setState({ typing })}
/>
<TouchableOpacity onPress={() => this.searching(this.state.typing)}>
<Icon name="ios-search" />
</TouchableOpacity>
</View>
</View>
<SafeAreaView>
<ScrollView>
<Card>
{this.state.results.map(result => (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem>
{
<Image
source={{
uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
}}
style={styles.poster}
/>
<TouchableOpacity onPress = {() => this.searching(this.state.typing)}>
<Icon name='ios-search'/>
</TouchableOpacity>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<View style={styles.rightUpContainer}>
<Text style={styles.name}>{result.title}</Text>
</View>
<View style={styles.rightDownContainer}>
<CardItem>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...`}
</Text>
</CardItem>
</View>
</View>
</View>
<Text>
{this.state.keyword}
</Text>
{/* <Image style={styles.imagecontainer}
style={{ height: "50%", width: "50%" }}
source={{ uri: `${this.state.items[1].image}` }}
source={{ uri: `${this.state.items[0].image}` }}
/> */}
{this.viewimage()}
</View>
)}
))}
</Card>
</ScrollView>
</SafeAreaView>
</View>
);
}
}
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'
},
imagecontainer:{
flex: 1
}
});
\ No newline at end of file
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"
},
imagecontainer: {
flex: 1
},
lowContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
},
leftContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2
},
rightUpContainer: {
flex: 1,
paddingTop: 20,
justifyContent: "center",
marginLeft: 10
},
rightDownContainer: {
flex: 3,
paddingTop: 20,
paddingBottom: 10
},
poster: {
resizeMode: "cover",
flex: 10,
width: "30%",
height: 160,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
},
content: {
flex: 1,
flexDirection: "row"
},
name: {
fontSize: 16
},
overview: {
fontSize: 14
}
});
......
import React, { Component } from 'react';
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 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";
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 },
Search: { screen: Search }
}, {
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: "bottom",
tabBarOptions: {
style: {
const AppTabNavigator = createMaterialTopTabNavigator(
{
SeenMovieTab: { screen: SeenMovieTab },
MovieRankingTab: { screen: MovieRankingTab },
WantToWatchTab: { screen: WantToWatchTab },
Search: { screen: Search }
},
{
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: "bottom",
tabBarOptions: {
style: {
...Platform.select({
android:{
backgroundColor:'white',
android: {
backgroundColor: "white"
}
})
},
iconStyle: { height: 30 },
activeTintColor: '#000',
inactiveTintColor: '#d1cece',
upperCaseLabel: false,
showLabel: false,
showIcon: true,
iconStyle: { height: 30 },
activeTintColor: "#000",
inactiveTintColor: "#d1cece",
upperCaseLabel: false,
showLabel: false,
showIcon: true
}
}
});
);
const AppTabContainet = createAppContainer(AppTabNavigator);
......@@ -43,19 +46,18 @@ export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: 'PoketMovie'
}
title: "PoketMovie"
};
render() {
return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
return <AppTabContainet />; // AppTabContainet 컴포넌트를 리턴한다.
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center"
}
});
\ No newline at end of file
});
......
import React, { Component } from "react";
import { StyleSheet, Text, View, StatusBar } from "react-native";
export default class MovieRankingTab extends Component {
return() {
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<Text style={styles.text}>Getting the current weather</Text>
</View>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-end",
paddingHorizontal: 30,
paddingVertical: 100,
backgroundColor: "#FDF6AA"
},
text: {
color: "#2c2c2c",
fontSize: 30
}
});
import React from "react";
import { StyleSheet, Text, View } from 'react-native';
import { AsyncStorage } from "react-native";
import Loading from "./Loading";
import axios from "axios";
const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
const NAVER_CLIENT_SECRET = "0GRb3uya1U";
// const option = {
// query: "겨울왕국"
// };
// request.get(
// {
// uri: "https://openapi.naver.com/v1/search/movie", //xml 요청 주소는 https://openapi.naver.com/v1/search/image.xml
// qs: option,
// headers: {
// "X-Naver-Client-Id": NAVER_CLIENT_ID,
// "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
// }
// },
// function(err, res, body) {
// let json = JSON.parse(body); //json으로 파싱
// console.log(json);
// }
// );
export default class extends React.Component {
state = {
isLoading: true
};
getNaverApi = async () => {
fetch("https://openapi.naver.com/v1/search/movie.json?query='겨울왕국 2'", {
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);
});
};
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.getMovieList();
this.getNaverApi();
}
render() {
return (
<View>
<Text>WantToWatchTab</Text>
</View>
);
}
}
\ No newline at end of file
......@@ -16,7 +16,7 @@
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-axios": "^0.17.1",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "~1.3.0",
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "~1.2.0",
"react-native-screens": "~1.0.0-alpha.23",
"react-native-stack": "^1.0.0-alpha11",
......
This diff is collapsed. Click to expand it.
......@@ -2726,6 +2726,11 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
......@@ -4711,14 +4716,15 @@ react-native-elements@^1.2.7:
react-native-ratings "^6.3.0"
react-native-status-bar-height "^2.2.0"
react-native-gesture-handler@~1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
react-native-gesture-handler@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.2.tgz#281111550bf1eee10b7feba5278d142169892731"
integrity sha512-Xp03dq4XYVTD0xmWx4DW4eX+ox1NQLjHmbykspTdS5FCNIVIOekVXRLFCw1698/v8dYUHApNo6K3s3BCD8fqPA==
dependencies:
hammerjs "^2.0.8"
hoist-non-react-statics "^2.3.1"
invariant "^2.2.2"
prop-types "^15.5.10"
invariant "^2.2.4"
prop-types "^15.7.2"
react-native-iphone-x-helper@^1.0.3:
version "1.2.1"
......