bluejoyq

clear module error and add swipe to nav bar

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