신승민

Search UI and Poster

This diff is collapsed. Click to expand it.
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
......