bluejoyq

clear module error and add swipe to nav bar

...@@ -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"
......