신승민

add UI

1 -import React from "react"; 1 +import React, { Component } from 'react';
2 -import { AsyncStorage } from "react-native"; 2 +import { StyleSheet, Text, View } from 'react-native';
3 -import Loading from "./Loading"; 3 +import { createAppContainer } from 'react-navigation';
4 -import axios from "axios"; 4 +import { createStackNavigator } from 'react-navigation-stack';
5 +
6 +import MainScreen from './Components/MainScreen';
7 +
8 +const AppStackNavigator = createStackNavigator({
9 + Main:{
10 + screen: MainScreen // MainScreen 컴포넌트를 네비게이터에 등록
11 + }
12 +});
13 +
14 +export default createAppContainer(AppStackNavigator);
5 15
6 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3"; 16 const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
7 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN"; 17 const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
...@@ -26,6 +36,7 @@ const NAVER_CLIENT_SECRET = "0GRb3uya1U"; ...@@ -26,6 +36,7 @@ const NAVER_CLIENT_SECRET = "0GRb3uya1U";
26 // } 36 // }
27 // ); 37 // );
28 38
39 +/*
29 export default class extends React.Component { 40 export default class extends React.Component {
30 state = { 41 state = {
31 isLoading: true 42 isLoading: true
...@@ -71,3 +82,4 @@ export default class extends React.Component { ...@@ -71,3 +82,4 @@ export default class extends React.Component {
71 ); 82 );
72 } 83 }
73 } 84 }
85 +*/
...\ No newline at end of file ...\ No newline at end of file
......
1 +import React, { Component } from 'react';
2 +import { View, Text, StyleSheet } from 'react-native';
3 +
4 +export default class AddMediaTab extends Component {
5 + render() {
6 + return (
7 + <View style={style.container}>
8 + <Text>AddMediaTab</Text>
9 + </View>
10 + );
11 + }
12 +}
13 +
14 +const style = StyleSheet.create({
15 + container: {
16 + flex: 1,
17 + alignItems: 'center',
18 + justifyContent: 'center',
19 + }
20 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import { View, Text, StyleSheet } from 'react-native';
3 +
4 +export default class HomeTab extends Component {
5 + render() {
6 + return (
7 + <View style={style.container}>
8 + <Text>HomeTab</Text>
9 + </View>
10 + );
11 + }
12 +}
13 +
14 +const style = StyleSheet.create({
15 + container: {
16 + flex: 1,
17 + alignItems: 'center',
18 + justifyContent: 'center',
19 + }
20 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import { View, Text, StyleSheet } from 'react-native';
3 +
4 +export default class LikesTab extends Component {
5 + render() {
6 + return (
7 + <View style={style.container}>
8 + <Text>LikesTab</Text>
9 + </View>
10 + );
11 + }
12 +}
13 +
14 +const style = StyleSheet.create({
15 + container: {
16 + flex: 1,
17 + alignItems: 'center',
18 + justifyContent: 'center',
19 + }
20 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import { View, Text, StyleSheet } from 'react-native';
3 +
4 +export default class ProfileTab extends Component {
5 + render() {
6 + return (
7 + <View style={style.container}>
8 + <Text>ProfileTab</Text>
9 + </View>
10 + );
11 + }
12 +}
13 +
14 +const style = StyleSheet.create({
15 + container: {
16 + flex: 1,
17 + alignItems: 'center',
18 + justifyContent: 'center',
19 + }
20 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import { View, Text, StyleSheet } from 'react-native';
3 +
4 +export default class SearchTab extends Component {
5 + render() {
6 + return (
7 + <View style={style.container}>
8 + <Text>SearchTab</Text>
9 + </View>
10 + );
11 + }
12 +}
13 +
14 +const style = StyleSheet.create({
15 + container: {
16 + flex: 1,
17 + alignItems: 'center',
18 + justifyContent: 'center',
19 + }
20 +});
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { Component } from 'react';
2 +import { StyleSheet, Text, View } from 'react-native';
3 +import { Icon } from 'native-base'; // 추가된 코드
4 +import { createAppContainer } from 'react-navigation';
5 +import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
6 +import HomeTab from './AppTabNavigator/HomeTab';
7 +import SearchTab from './AppTabNavigator/SearchTab';
8 +import AddMediaTab from './AppTabNavigator/AddMediaTab';
9 +import LikesTab from './AppTabNavigator/LikesTab';
10 +import ProfileTab from './AppTabNavigator/ProfileTab';
11 +import { Platform } from 'react-native'
12 +
13 +
14 +const AppTabNavigator = createMaterialTopTabNavigator({
15 + HomeTab:{ screen: HomeTab },
16 + Search:{ screen: SearchTab },
17 + AddMedia:{ screen: AddMediaTab },
18 + Likes:{ screen: LikesTab },
19 + Profile:{ screen: ProfileTab }
20 +}, {
21 + animationEnabled: true,
22 + swipeEnabled: true,
23 + tabBarPosition: "bottom",
24 + tabBarOptions: {
25 + style: {
26 + ...Platform.select({
27 + android:{
28 + backgroundColor:'white',
29 + }
30 + })
31 + },
32 + iconStyle: { height: 8 },
33 + activeTintColor: '#000',
34 + inactiveTintColor: '#d1cece',
35 + upperCaseLabel: false,
36 + showLabel: true,
37 + showIcon: true,
38 + }
39 +});
40 +
41 +const AppTabContainet = createAppContainer(AppTabNavigator);
42 +
43 +export default class MainScreen extends Component {
44 + // navigationOptions 코드 추가
45 + static navigationOptions = {
46 + headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
47 + title: 'poketMovie',
48 + headerRight: <Icon name='ios-send' style={{ paddingRight:10 }}/>,
49 + }
50 +
51 + render() {
52 + return <AppTabContainet/>; // AppTabContainet 컴포넌트를 리턴한다.
53 + }
54 +}
55 +
56 +const styles = StyleSheet.create({
57 + container: {
58 + flex: 1,
59 + alignItems: 'center',
60 + justifyContent: 'center',
61 + },
62 +});
...\ No newline at end of file ...\ No newline at end of file
...@@ -10,10 +10,18 @@ ...@@ -10,10 +10,18 @@
10 "dependencies": { 10 "dependencies": {
11 "axios": "^0.19.0", 11 "axios": "^0.19.0",
12 "expo": "^35.0.0", 12 "expo": "^35.0.0",
13 + "native-base": "^2.13.8",
13 "react": "16.8.3", 14 "react": "16.8.3",
14 "react-dom": "16.8.3", 15 "react-dom": "16.8.3",
15 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", 16 "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
17 + "react-native-axios": "^0.17.1",
18 + "react-native-gesture-handler": "~1.3.0",
19 + "react-native-reanimated": "~1.2.0",
20 + "react-native-screens": "~1.0.0-alpha.23",
21 + "react-native-stack": "^1.0.0-alpha11",
16 "react-native-web": "^0.11.7", 22 "react-native-web": "^0.11.7",
23 + "react-navigation": "^4.0.10",
24 + "react-navigation-stack": "^1.10.3",
17 "request": "^2.88.0" 25 "request": "^2.88.0"
18 }, 26 },
19 "devDependencies": { 27 "devDependencies": {
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.