신승민 / pocketMovie

Go to a project
Toggle navigation Toggle navigation pinning
“Hojin
0827932f 1 parent f8ebc8d2

Edit GUI

Inline Side-by-side
Showing 8 changed files with 471 additions and 208 deletions
......@@ -42,7 +42,15 @@ export default class MovieRankingTab extends Component {
imgur8: [],
imgur9: [],
overview0: [],
overview1: []
overview1: [],
overview2: [],
overview3: [],
overview4: [],
overview5: [],
overview6: [],
overview7: [],
overview8: [],
overview9: []
};
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
......@@ -100,7 +108,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl2: response.data.results[0].poster_path });
this.setState({
imgurl2: response.data.results[0].poster_path,
overview2: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[3].movieNm;
axios
......@@ -108,7 +119,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl3: response.data.results[0].poster_path });
this.setState({
imgurl3: response.data.results[0].poster_path,
overview3: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[4].movieNm;
axios
......@@ -116,7 +130,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl4: response.data.results[0].poster_path });
this.setState({
imgurl4: response.data.results[0].poster_path,
overview4: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[5].movieNm;
axios
......@@ -124,7 +141,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl5: response.data.results[0].poster_path });
this.setState({
imgurl5: response.data.results[0].poster_path,
overview5: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[6].movieNm;
axios
......@@ -132,7 +152,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl6: response.data.results[0].poster_path });
this.setState({
imgurl6: response.data.results[0].poster_path,
overview6: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[7].movieNm;
axios
......@@ -140,7 +163,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl7: response.data.results[0].poster_path });
this.setState({
imgurl7: response.data.results[0].poster_path,
overview7: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[8].movieNm;
axios
......@@ -148,7 +174,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl8: response.data.results[0].poster_path });
this.setState({
imgurl8: response.data.results[0].poster_path,
overview8: response.data.results[0].overview
});
});
name = response.data.boxOfficeResult.dailyBoxOfficeList[9].movieNm;
axios
......@@ -156,7 +185,10 @@ export default class MovieRankingTab extends Component {
`https://api.themoviedb.org/3/search/movie?api_key=840724c8aa8b3b7c4ab68db53310cc9f&query=${name}&language=ko-KR&page=1`
)
.then(response => {
this.setState({ imgurl9: response.data.results[0].poster_path });
this.setState({
imgurl9: response.data.results[0].poster_path,
overview9: response.data.results[0].overview
});
});
})
.catch(error => {
......@@ -176,12 +208,15 @@ export default class MovieRankingTab extends Component {
this.getMovieList(date);
}
_onPressButton(temp) {
Alert.alert(temp);
Alert.alert(temp); //메시지 띄우고
console.log(temp); //콘솔에 log 띄운다
AsyncStorage.setItem("MovieLists", temp); //DB에 저장한다
}
render() {
return (
<SafeAreaView style={style.container}>
<ScrollView style={style.scrollView}>
{/* ----- 1위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
......@@ -197,17 +232,33 @@ export default class MovieRankingTab extends Component {
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<Text style={style.name}>{this.state.name0}</Text>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text style={style.name}>{this.state.name0}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<Text>
{this.state.overview0.length < 60
? `${this.state.overview0}`
: `${this.state.overview0.substring(0, 57)}...`}
</Text>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name0}`
)}
>
<Text style={style.overview}>
{this.state.overview0.length < 70
? `${this.state.overview0}`
: `${this.state.overview0.substring(0, 65)}...\n `}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 2위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
......@@ -223,93 +274,273 @@ export default class MovieRankingTab extends Component {
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<Text style={style.name}>{this.state.name1}</Text>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<Text style={style.overview}>{this.state.overview1}</Text>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.overview}>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* <View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
}}
/>
<Text>{this.state.name2}</Text>
{/* ----- 3위 ----- */}
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name2}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl2}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl3}`
}}
/>
<Text>{this.state.name3}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text style={style.name}>{this.state.name2}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name2}`
)}
>
<Text style={style.overview}>
{this.state.overview2.length < 60
? `${this.state.overview2}`
: `${this.state.overview2.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
{/* ----- 4위 ----- */}
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
}}
/>
<Text>{this.state.name4}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name4}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl4}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl5}`
}}
/>
<Text>{this.state.name5}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
)}
>
<Text style={style.name}>{this.state.name4}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name4}`
)}
>
<Text style={style.overview}>
{this.state.overview4.length < 60
? `${this.state.overview4}`
: `${this.state.overview4.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl6}`
}}
/>
<Text>{this.state.name6}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl7}`
}}
/>
<Text>{this.state.name7}</Text>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl8}`
}}
/>
<Text>{this.state.name8}</Text>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
<View style={style.halfContainer}>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl9}`
}}
/>
<Text>{this.state.name9}</Text>
</View>
<View style={style.lowContainer}>
<View style={style.leftContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(this, `${this.state.name1}`)}
>
<Image
style={style.poster}
source={{
uri: `https://image.tmdb.org/t/p/original/${this.state.imgurl1}`
}}
/>
</TouchableOpacity>
</View>
<View style={style.rightContainer}>
<View style={style.rightUpContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text style={style.name}>{this.state.name1}</Text>
</TouchableOpacity>
</View>
<View style={style.rightDownContainer}>
<TouchableOpacity
onPress={this._onPressButton.bind(
this,
`${this.state.name1}`
)}
>
<Text>
{this.state.overview1.length < 60
? `${this.state.overview1}`
: `${this.state.overview1.substring(0, 57)}...\n`}
</Text>
</TouchableOpacity>
</View>
</View>
</View> */}
</View>
</ScrollView>
</SafeAreaView>
);
......@@ -317,7 +548,8 @@ export default class MovieRankingTab extends Component {
}
const style = StyleSheet.create({
container: {
flex: 1
flex: 1,
backgroundColor: "black"
},
scrollView: {
// backgroundColor: "black",
......@@ -336,12 +568,9 @@ const style = StyleSheet.create({
// alignContent: "space-around",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
},
halfContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
marginLeft: 10,
marginTop: 10,
marginBottom: 20
},
leftContainer: {
flex: 1,
......@@ -356,10 +585,10 @@ const style = StyleSheet.create({
},
rightUpContainer: {
flex: 1,
paddingTop: 20,
paddingTop: 15,
// backgroundColor: "blue",
justifyContent: "center",
marginLeft: 10
marginLeft: 20
// alignItems: "center"
},
rightDownContainer: {
......@@ -367,23 +596,26 @@ const style = StyleSheet.create({
// backgroundColor: "red",
// margin: "5%"
paddingTop: 20,
paddingBottom: 10
paddingBottom: 10,
padding: 15
// justifyContent: "center",
// alignItems: "center"
},
poster: {
resizeMode: "cover",
flex: 10,
width: "30%",
height: 160,
paddingHorizontal: 50,
width: "40%",
height: 40,
paddingHorizontal: 58,
alignItems: "stretch",
borderRadius: 7
},
name: {
fontSize: 16
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14
fontSize: 14,
color: "white"
}
});
......
......@@ -63,57 +63,65 @@ export default class Search extends Component {
render() {
return (
<View>
<View style={styles.container}>
<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 style={styles.searchContainer}>
<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>
</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}
/>
}
</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 style={styles.container}>
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Card>
{this.state.results.map(result => (
<View style={styles.lowContainer}>
<View style={styles.leftContainer}>
<CardItem style={styles.container}>
{
<Image
source={{
uri: `https://image.tmdb.org/t/p/original/${result.poster_path}`
}}
style={styles.poster}
/>
}
</CardItem>
</View>
<View style={styles.rightContainer}>
<View style={styles.rightUpContainer}>
<Text style={styles.name}>{result.title}</Text>
</View>
<View style={styles.rightDownContainer}>
<CardItem style={styles.container}>
<Text style={styles.overview}>
{result.overview.length < 60
? `${result.overview}`
: `${result.overview.substring(0, 57)}...\n`}
</Text>
</CardItem>
</View>
</View>
</View>
))}
</Card>
</View>
))}
</Card>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
</View>
</View>
</View>
);
}
......@@ -121,8 +129,13 @@ export default class Search extends Component {
const styles = StyleSheet.create({
container: {
marginLeft: 50,
marginRight: 50
flex: 1,
backgroundColor: "black"
},
searchContainer: {
backgroundColor: "black",
marginLeft: 40,
marginRight: 40
},
input: {
borderRadius: 10,
......@@ -146,29 +159,32 @@ const styles = StyleSheet.create({
flex: 1
},
lowContainer: {
backgroundColor: "black",
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
alignItems: "center"
},
leftContainer: {
flex: 1,
backgroundColor: "black",
justifyContent: "center",
alignItems: "center"
},
rightContainer: {
flex: 2
flex: 2,
backgroundColor: "black"
},
rightUpContainer: {
flex: 1,
paddingTop: 20,
backgroundColor: "black",
paddingTop: 35,
justifyContent: "center",
marginLeft: 10
marginLeft: 20
},
rightDownContainer: {
flex: 3,
paddingTop: 20,
backgroundColor: "black",
paddingBottom: 10
},
poster: {
......@@ -176,18 +192,17 @@ const styles = StyleSheet.create({
flex: 10,
width: "30%",
height: 160,
marginLeft: 10,
paddingHorizontal: 50,
alignItems: "stretch",
borderRadius: 7
},
content: {
flex: 1,
flexDirection: "row"
},
name: {
fontSize: 16
fontSize: 16,
color: "white"
},
overview: {
fontSize: 14
fontSize: 14,
color: "white"
}
});
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Icon } from "native-base";
export default class SeenMovieTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-albums' style={{ color: tintColor }} />
)
}
render() {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
</View>
);
}
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-albums" style={{ color: tintColor }} />
)
};
render() {
return (
<View style={style.container}>
<Text>SeenMovieTab</Text>
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
\ No newline at end of file
container: {
backgroundColor: "black",
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
......
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Icon } from 'native-base';
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { Icon } from "native-base";
export default class WantToWatchTab extends Component {
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name='ios-star' style={{ color: tintColor }} />
)
}
render() {
return (
<View style={style.container}>
<Text>WantToWatchTab</Text>
</View>
);
}
static navigationOptions = {
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-star" style={{ color: tintColor }} />
)
};
render() {
return (
<View style={style.container}>
<Text>WantToWatchTab</Text>
</View>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
\ No newline at end of file
container: {
backgroundColor: "black",
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
......
......@@ -9,6 +9,8 @@ import MovieRankingTab from "./AppTabNavigator/WantToWatchTab";
import WantToWatchTab from "./AppTabNavigator/SeenMovieTab";
import Search from ".//AppTabNavigator/Search";
import { Platform } from "react-native";
import { black } from "ansi-colors";
import { colors } from "react-native-elements";
//import { Ionicons } from '@expo/vector-icons';
const AppTabNavigator = createMaterialTopTabNavigator(
......@@ -26,13 +28,13 @@ const AppTabNavigator = createMaterialTopTabNavigator(
style: {
...Platform.select({
android: {
backgroundColor: "white"
backgroundColor: "black"
}
})
},
iconStyle: { height: 30 },
activeTintColor: "#000",
inactiveTintColor: "#d1cece",
activeTintColor: "white",
inactiveTintColor: "dimgray",
upperCaseLabel: false,
showLabel: false,
showIcon: true
......@@ -46,7 +48,14 @@ export default class MainScreen extends Component {
// navigationOptions 코드 추가
static navigationOptions = {
//headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
title: "PoketMovie"
title: " Poket Movie",
headerStyle: {
backgroundColor: "black"
},
headerTintColor: "white",
headerTitleStyle: {
fontWeight: "bold"
}
};
render() {
......
No preview for this file type
No preview for this file type
{
"main": "node_modules/expo/AppEntry.js",
"rnpm": {
"assets": [
"./assets/fonts"
]
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
......@@ -10,6 +15,7 @@
"dependencies": {
"axios": "^0.19.0",
"expo": "^35.0.0",
"expo-font": "~7.0.0",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-dom": "16.8.3",
......