Showing
10 changed files
with
186 additions
and
4 deletions
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 | ... | ... |
Components/AppTabNavigator/AddMediaTab.js
0 → 100644
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 |
Components/AppTabNavigator/HomeTab.js
0 → 100644
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 |
Components/AppTabNavigator/LikesTab.js
0 → 100644
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 |
Components/AppTabNavigator/ProfileTab.js
0 → 100644
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 |
Components/AppTabNavigator/SearchTab.js
0 → 100644
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 |
Components/MainScreen.js
0 → 100644
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": { | ... | ... |
yarn-error.log
0 → 100644
This diff could not be displayed because it is too large.
yarn.lock
0 → 100644
This diff could not be displayed because it is too large.
-
Please register or login to post a comment