Showing
7 changed files
with
61 additions
and
40 deletions
... | @@ -2,8 +2,8 @@ | ... | @@ -2,8 +2,8 @@ |
2 | "devToolsPort": 19002, | 2 | "devToolsPort": 19002, |
3 | "expoServerPort": 19000, | 3 | "expoServerPort": 19000, |
4 | "packagerPort": 19001, | 4 | "packagerPort": 19001, |
5 | - "packagerPid": 18628, | 5 | + "packagerPid": 25640, |
6 | "expoServerNgrokUrl": "https://ep-ukj.anonymous.searchguide.exp.direct", | 6 | "expoServerNgrokUrl": "https://ep-ukj.anonymous.searchguide.exp.direct", |
7 | "packagerNgrokUrl": "https://packager.ep-ukj.anonymous.searchguide.exp.direct", | 7 | "packagerNgrokUrl": "https://packager.ep-ukj.anonymous.searchguide.exp.direct", |
8 | - "ngrokPid": 25796 | 8 | + "ngrokPid": 23544 |
9 | } | 9 | } | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | -import { View, Text} from 'react-native'; | ||
3 | -import Home from './components/Home/Home'; | ||
4 | import AppContainer from './components/AppContainer/AppContainer'; | 2 | import AppContainer from './components/AppContainer/AppContainer'; |
5 | 3 | ||
6 | 4 | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | -import { BottomNavigation, Text } from 'react-native-paper'; | 2 | +import {createAppContainer} from 'react-navigation'; |
3 | +import {createMaterialTopTabNavigator} from 'react-navigation-tabs'; | ||
3 | import { StatusBar } from 'react-native'; | 4 | import { StatusBar } from 'react-native'; |
4 | import Home from '../Home/Home'; | 5 | import Home from '../Home/Home'; |
5 | import Rate from '../Rate/Rate'; | 6 | import Rate from '../Rate/Rate'; |
6 | 7 | ||
7 | -const HomeScreen = () => <Home />; | 8 | +const AppTabNavigator = createMaterialTopTabNavigator ( |
8 | -const RateScreen = () => <Rate />; | 9 | + { |
9 | - | 10 | + Home: Home, |
10 | -export default class AppContainer extends React.Component { | 11 | + Rate: Rate |
11 | - constructor(props){ | 12 | + }, |
12 | - super(props); | 13 | + { |
13 | - this.state = { | 14 | + initialRouteName: 'Home', |
14 | - index: 0, | 15 | + tabBarPosition: 'bottom', |
15 | - routes: [ | 16 | + tabBarOptions:{ |
16 | - { key: 'home', title: '검색', icon: 'magnify' }, | 17 | + activeTintColor: '#f0edf6', |
17 | - { key: 'rate', title: '평가', icon: 'chart-line' }, | 18 | + inactiveTintColor: '#226557', |
18 | - ], | 19 | + indicatorStyle: { |
19 | - }; | 20 | + backgroundColor: '#f0edf6', |
21 | + }, | ||
22 | + style:{ | ||
23 | + backgroundColor:'#3BAD87', | ||
24 | + allowFontScaling : 'true' | ||
25 | + }, | ||
26 | + showIcon: true, | ||
27 | + tabStyle: { | ||
28 | + height: 60, | ||
29 | + }, | ||
30 | + labelStyle :{ | ||
31 | + margin : 0, | ||
32 | + padding : 0, | ||
33 | + fontSize: 15, | ||
34 | + }, | ||
35 | + iconStyle :{ | ||
36 | + margin : 0, | ||
37 | + padding : 0, | ||
20 | } | 38 | } |
21 | - | 39 | + }, |
22 | - | ||
23 | - _handleIndexChange = index => this.setState({ index }); | ||
24 | - | ||
25 | - _renderScene = BottomNavigation.SceneMap({ | ||
26 | - home: HomeScreen, | ||
27 | - rate: RateScreen, | ||
28 | - }); | ||
29 | - | ||
30 | - render() { | ||
31 | - return ( | ||
32 | - <BottomNavigation style={{marginTop : StatusBar.currentHeight }} | ||
33 | - navigationState={this.state} | ||
34 | - onIndexChange={this._handleIndexChange} | ||
35 | - renderScene={this._renderScene} | ||
36 | - /> | ||
37 | - ); | ||
38 | } | 40 | } |
39 | -} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
41 | +); | ||
42 | +const AppContainer = createAppContainer(AppTabNavigator); | ||
43 | +export default AppContainer; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { View, Text} from 'react-native'; | 2 | import { View, Text} from 'react-native'; |
3 | +import Icon from 'react-native-vector-icons/FontAwesome'; | ||
3 | 4 | ||
4 | -export default class Home extends React.Component { | 5 | +class Home extends React.Component { |
5 | constructor(props) { | 6 | constructor(props) { |
6 | super(props); | 7 | super(props); |
7 | this.state = { | 8 | this.state = { |
8 | 9 | ||
9 | } | 10 | } |
10 | } | 11 | } |
12 | + static navigationOptions={ | ||
13 | + title:'검색', | ||
14 | + tabBarIcon: ({tintColor}) => (<Icon name="search" color={tintColor} style={{marginLeft:2}} size={20} />), | ||
15 | + } | ||
11 | 16 | ||
12 | render() { | 17 | render() { |
13 | return( | 18 | return( |
... | @@ -18,3 +23,5 @@ export default class Home extends React.Component { | ... | @@ -18,3 +23,5 @@ export default class Home extends React.Component { |
18 | } | 23 | } |
19 | 24 | ||
20 | } | 25 | } |
26 | + | ||
27 | +export default Home; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { View, Text} from 'react-native'; | 2 | import { View, Text} from 'react-native'; |
3 | +import Icon from 'react-native-vector-icons/FontAwesome'; | ||
3 | 4 | ||
4 | -export default class Rate extends React.Component { | 5 | +class Rate extends React.Component { |
5 | constructor(props) { | 6 | constructor(props) { |
6 | super(props); | 7 | super(props); |
7 | this.state = { | 8 | this.state = { |
... | @@ -9,6 +10,11 @@ export default class Rate extends React.Component { | ... | @@ -9,6 +10,11 @@ export default class Rate extends React.Component { |
9 | } | 10 | } |
10 | } | 11 | } |
11 | 12 | ||
13 | + static navigationOptions={ | ||
14 | + title:'평가', | ||
15 | + tabBarIcon: ({tintColor})=> (<Icon name="bar-chart-o" color={tintColor} style={{marginLeft:1}} size={20} />), | ||
16 | + } | ||
17 | + | ||
12 | render() { | 18 | render() { |
13 | return( | 19 | return( |
14 | <View> | 20 | <View> |
... | @@ -18,3 +24,5 @@ export default class Rate extends React.Component { | ... | @@ -18,3 +24,5 @@ export default class Rate extends React.Component { |
18 | } | 24 | } |
19 | 25 | ||
20 | } | 26 | } |
27 | + | ||
28 | +export default Rate; | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
This diff is collapsed. Click to expand it.
... | @@ -8,15 +8,19 @@ | ... | @@ -8,15 +8,19 @@ |
8 | "eject": "expo eject" | 8 | "eject": "expo eject" |
9 | }, | 9 | }, |
10 | "dependencies": { | 10 | "dependencies": { |
11 | + "1.3.0": "^1.3.0", | ||
11 | "expo": "^35.0.0", | 12 | "expo": "^35.0.0", |
12 | "react": "16.8.3", | 13 | "react": "16.8.3", |
13 | "react-dom": "16.8.3", | 14 | "react-dom": "16.8.3", |
14 | "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", | 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", |
15 | - "react-native-gesture-handler": "^1.5.0", | 16 | + "react-native-gesture-handler": "~1.3.0", |
16 | "react-native-navigation": "^3.6.0", | 17 | "react-native-navigation": "^3.6.0", |
17 | "react-native-paper": "^3.2.1", | 18 | "react-native-paper": "^3.2.1", |
19 | + "react-native-reanimated": "^1.4.0", | ||
18 | "react-native-web": "^0.11.7", | 20 | "react-native-web": "^0.11.7", |
19 | - "react-navigation-material-bottom-tabs": "^2.1.5" | 21 | + "react-navigation": "^4.0.10", |
22 | + "react-navigation-material-bottom-tabs": "^2.1.5", | ||
23 | + "react-navigation-tabs": "^2.5.6" | ||
20 | }, | 24 | }, |
21 | "devDependencies": { | 25 | "devDependencies": { |
22 | "babel-preset-expo": "^7.1.0" | 26 | "babel-preset-expo": "^7.1.0" | ... | ... |
-
Please register or login to post a comment