Skip to content

S
safetcut-app
Commit 3e189705 by OuiAtichat
Options

navbar & navigation update

parent cbe32519
Showing with 221 additions and 7 deletions
src/navigation/AppRouter.js
...@@ -2,11 +2,11 @@ import React, { Component } from 'react'; ...@@ -2,11 +2,11 @@ import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux'; import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from '../store'; import store from '../store';
import PageOne from '../screens/private/PageOne'; import PageOne from '../screens/private/PageOne';
import PageTwo from '../screens/private/PageTwo'; import PageTwo from '../screens/private/PageTwo';
import LoginPage from '../screens/public/LoginPage'; import LoginPage from '../screens/public/LoginPage';
import HomePage from '../screens/private/HomePage'; import HomePage from '../screens/private/HomePage';
import HomePage2 from '../screens/private/HomePage2';
class AppRouterComponent extends Component { class AppRouterComponent extends Component {
render() { render() {
...@@ -14,7 +14,8 @@ class AppRouterComponent extends Component { ...@@ -14,7 +14,8 @@ class AppRouterComponent extends Component {
<Provider store={store}> <Provider store={store}>
<Router> <Router>
<Scene key="root" hideNavBar> <Scene key="root" hideNavBar>
<Scene key="HomePage" component={HomePage} initial={true} /> <Scene key="HomePage2" component={HomePage2} initial={true} />
<Scene key="HomePage" component={HomePage} />
<Scene key="PageOne" component={PageOne} /> <Scene key="PageOne" component={PageOne} />
<Scene key="PageTwo" component={PageTwo} /> <Scene key="PageTwo" component={PageTwo} />
<Scene key="LoginPage" component={LoginPage} /> <Scene key="LoginPage" component={LoginPage} />
......
src/screens/private/HomePage.js
...@@ -24,13 +24,15 @@ class HomePage extends Component { ...@@ -24,13 +24,15 @@ class HomePage extends Component {
renderButtonTabs = () => { renderButtonTabs = () => {
return ( return (
<Tabs <Tabs
tabContainerStyle={{ backgroundColor: '#fbfbfb', paddingHorizontal: 20 }} tabContainerStyle={{ backgroundColor: '#fbfbfb' }}
tabBarPosition="overlayBottom" tabBarPosition="overlayBottom"
tabBarUnderlineStyle={{ tabBarUnderlineStyle={{
borderRadius: 3,
height: 3,
backgroundColor: '#f44c4c', backgroundColor: '#f44c4c',
top: 0, top: 0,
width: width / 10, width: width / 10 + 10,
marginLeft: width / 20 + 5, marginLeft: width / 20 - 5,
}} }}
onChangeTab={({ i }) => { onChangeTab={({ i }) => {
this.setState({ activeIndex: i }); this.setState({ activeIndex: i });
......
src/screens/private/HomePage2.js 0 → 100644
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Text, Platform } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import { Icon, Container } from 'native-base';
import { width, height } from '../../constants/Layout';
import { Header } from 'react-native-elements';
import Animated from 'react-native-reanimated';
const FirstRoute = () => <View style={[styles.scene, { backgroundColor: '#b9babc' }]} />;
const SecondRoute = () => <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />;
const ThirdRoute = () => <View style={[styles.scene, { backgroundColor: 'red' }]} />;
const FourthRoute = () => <View style={[styles.scene, { backgroundColor: 'green' }]} />;
// const FifthRoute = () => <View style={[styles.scene, { backgroundColor: 'blue' }]} />;
import PageOne from '../private/PageOne';
const LeftComponent = () => <Icon name="menu" style={{ color: 'white', fontSize: 24 }} />;
const RightComponent = () => <Icon name="notifications" style={{ color: 'white', fontSize: 24 }} />;
class HomePage extends Component {
position = new Animated.Value(0);
state = {
index: 0,
routes: [
{ id: 0, key: 'first', title: 'Smart Meter', icon: { name: 'home' } },
{ id: 1, key: 'second', title: 'Time', icon: { name: 'md-time' } },
{ id: 2, key: 'third', title: 'History', icon: { type: 'SimpleLineIcons', name: 'chart' } },
{ id: 3, key: 'fourth', title: 'Share', icon: { name: 'ios-share-alt' } },
{ id: 4, key: 'fifth', title: 'Setting', icon: { type: 'SimpleLineIcons', name: 'settings' } },
],
};
renderTabBar = props => {
// console.log();
return (
<TabBar
{...props}
tabStyle={{
padding: 0,
paddingBottom: 4,
paddingTop: 10,
}}
style={{
backgroundColor: 'white',
opacity: 1,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
// renderIndicator={() => <Icon name="star" />}
indicatorStyle={{
// marginHorizontal: 10,
backgroundColor: '#f44c4c',
top: 0,
height: 4,
borderRadius: 3,
width: width / 10 + 10,
left: width / 20 - 5,
// left: 10 + this.state.index * -10,
// left: 10 + props.navigationState.index * -7.5,
}}
renderIcon={({ route }) => (
<Icon
style={{ color: this.state.index === route.id ? '#f44c4c' : '#b9babc', fontSize: 22 }}
type={route.icon.type || 'Ionicons'}
name={route.icon.name}
/>
)}
renderLabel={({ route }) => (
<Text
style={{
color: this.state.index === route.id ? '#f44c4c' : '#b9babc',
fontFamily: 'Avenir_Roman',
fontSize: 12,
}}
>
{route.title}
</Text>
)}
// onTabPress={() => console.log('hello')}
/>
);
};
_renderLazyPlaceholder = ({ route }) => <LazyPlaceholder route={route} />;
render() {
return (
<Container style={{ backgroundColor: '#b9babc' }}>
<Header
containerStyle={{
borderBottomWidth: 0,
}}
statusBarProps={{ barStyle: 'light-content' }}
backgroundColor="#f44c4c"
leftComponent={<LeftComponent />}
centerComponent={{
text: 'Untitled',
style: { color: '#fff', fontFamily: 'Avenir_Roman', fontSize: 16 },
}}
rightComponent={<RightComponent />}
/>
<TabView
lazy
position={this.position}
// animationEnabled={false}
removeClippedSubviews={Platform.OS === 'ios' ? false : true}
tabBarPosition="bottom"
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthRoute,
fifth: PageOne,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width, height: 0 }}
renderTabBar={this.renderTabBar}
/>
</Container>
);
}
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
export default HomePage;
src/screens/private/HomePage3.js 0 → 100644
import * as React from 'react';
import { View, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';
import { Constants } from 'expo';
const FirstRoute = () => <View style={[styles.container, { backgroundColor: '#ff4081' }]} />;
const SecondRoute = () => <View style={[styles.container, { backgroundColor: '#673ab7' }]} />;
export default class TabViewExample extends React.Component {
state = {
index: 0,
routes: [{ key: 'first', title: 'First' }, { key: 'second', title: 'Second' }],
};
_handleIndexChange = index => this.setState({ index });
_renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i);
return (
<View style={styles.tabBar}>
{props.navigationState.routes.map((route, i) => {
const color = Animated.color(
Animated.round(
Animated.interpolate(props.position, {
inputRange,
outputRange: inputRange.map(inputIndex => (inputIndex === i ? 255 : 0)),
})
),
0,
0
);
return (
<TouchableOpacity style={styles.tabItem} onPress={() => this.setState({ index: i })}>
<Animated.Text style={{ color }}>{route.title}</Animated.Text>
</TouchableOpacity>
);
})}
</View>
);
};
_renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
render() {
return (
<TabView
navigationState={this.state}
renderScene={this._renderScene}
renderTabBar={this._renderTabBar}
onIndexChange={this._handleIndexChange}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
// paddingTop: Constants.statusBarHeight,
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 16,
},
});
yarn.lock
...@@ -6183,7 +6183,7 @@ react-native-gesture-handler@1.2.1: ...@@ -6183,7 +6183,7 @@ react-native-gesture-handler@1.2.1:
invariant "^2.2.2" invariant "^2.2.2"
prop-types "^15.5.10" prop-types "^15.5.10"
react-native-gesture-handler@^1.2.1: react-native-gesture-handler@^1.3.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz#d0386f565928ccc1849537f03f2e37fd5f6ad43f"
integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ== integrity sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==
...@@ -6228,6 +6228,11 @@ react-native-reanimated@1.0.1: ...@@ -6228,6 +6228,11 @@ react-native-reanimated@1.0.1:
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz#5ecb6a2f6dad0351077ac9b771ca943b7ad6feda" resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz#5ecb6a2f6dad0351077ac9b771ca943b7ad6feda"
integrity sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA== integrity sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA==
react-native-reanimated@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.1.0.tgz#ba6864055ec3a206cdd5209a293fe653ce276206"
integrity sha512-UGDVNfvuIkMqYUx6aytSzihuzv6sWubn0MQi8dRcw7BjgezhjJnVnJ/NSOcpL3cO+Ld7lFcRX6GKcskwkHdPkw==
react-native-router-flux@^4.0.6: react-native-router-flux@^4.0.6:
version "4.0.6" version "4.0.6"
resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.6.tgz#e4723f5ce89cb5822e0c9bb6d0a8d4de6179eb58" resolved "https://registry.yarnpkg.com/react-native-router-flux/-/react-native-router-flux-4.0.6.tgz#e4723f5ce89cb5822e0c9bb6d0a8d4de6179eb58"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment