Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 72fe7d2

Browse files
added sidebar drawer and black-white theme and used it in the app, also configured header
1 parent 1b2ed40 commit 72fe7d2

File tree

11 files changed

+369
-74
lines changed

11 files changed

+369
-74
lines changed

‎assets/logo.png‎

11.1 KB
Loading[フレーム]
Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import color from "color";
2+
3+
import {Platform, Dimensions, PixelRatio} from "react-native";
4+
5+
const deviceHeight = Dimensions.get("window").height;
6+
const deviceWidth = Dimensions.get("window").width;
7+
const platform = Platform.OS;
8+
const platformStyle = "material";
9+
const isIphoneX =
10+
platform === "ios" && deviceHeight === 812 && deviceWidth === 375;
11+
12+
export default {
13+
"platformStyle": "material",
14+
"platform": "ios",
15+
"androidRipple": false,
16+
"androidRippleColor": "rgba(256, 256, 256, 0.3)",
17+
"androidRippleColorDark": "rgba(0, 0, 0, 0.15)",
18+
"btnUppercaseAndroidText": true,
19+
"badgeBg": "#ED1727",
20+
"badgeColor": "#fff",
21+
"badgePadding": 3,
22+
"btnFontFamily": "Roboto",
23+
"btnDisabledBg": "#b5b5b5",
24+
"buttonPadding": 6,
25+
"btnPrimaryBg": "rgba(0,0,0,1)",
26+
"btnPrimaryColor": "#fff",
27+
"btnInfoBg": "#3F57D3",
28+
"btnInfoColor": "#fff",
29+
"btnSuccessBg": "#5cb85c",
30+
"btnSuccessColor": "#fff",
31+
"btnDangerBg": "#d9534f",
32+
"btnDangerColor": "#fff",
33+
"btnWarningBg": "#f0ad4e",
34+
"btnWarningColor": "#fff",
35+
"btnTextSize": 16.5,
36+
"btnTextSizeLarge": 22.5,
37+
"btnTextSizeSmall": 12,
38+
"borderRadiusLarge": 57,
39+
"iconSizeLarge": 45,
40+
"iconSizeSmall": 18,
41+
"cardDefaultBg": "#fff",
42+
"cardBorderColor": "#ccc",
43+
"CheckboxRadius": 0,
44+
"CheckboxBorderWidth": 2,
45+
"CheckboxPaddingLeft": 2,
46+
"CheckboxPaddingBottom": 0,
47+
"CheckboxIconSize": 18,
48+
"CheckboxFontSize": 21,
49+
"DefaultFontSize": 17,
50+
"checkboxBgColor": "rgba(0,0,0,1)",
51+
"checkboxSize": 20,
52+
"checkboxTickColor": "#fff",
53+
"brandPrimary": "rgba(0,0,0,1)",
54+
"brandInfo": "#3F57D3",
55+
"brandSuccess": "#5cb85c",
56+
"brandDanger": "#d9534f",
57+
"brandWarning": "#f0ad4e",
58+
"brandDark": "#000",
59+
"brandLight": "#f4f4f4",
60+
"fontFamily": "Roboto",
61+
"fontSizeBase": 15,
62+
"fontSizeH1": 27,
63+
"fontSizeH2": 24,
64+
"fontSizeH3": 21,
65+
"footerHeight": 55,
66+
"footerDefaultBg": "rgba(255,255,255,1)",
67+
"footerPaddingBottom": 0,
68+
"tabBarTextColor": "rgba(0,0,0,1)",
69+
"tabBarTextSize": 14,
70+
"activeTab": "#fff",
71+
"sTabBarActiveTextColor": "rgba(0,0,0,1)",
72+
"tabBarActiveTextColor": "rgba(0,0,0,1)",
73+
"tabActiveBgColor": "rgba(255,255,255,1)",
74+
"toolbarBtnColor": "rgba(0,0,0,1)",
75+
"toolbarDefaultBg": "rgba(255,255,255,1)",
76+
"toolbarHeight": 60,
77+
"toolbarSearchIconSize": 20,
78+
"toolbarInputColor": "#fff",
79+
"searchBarHeight": 30,
80+
"searchBarInputHeight": 30,
81+
"toolbarBtnTextColor": "#fff",
82+
"toolbarDefaultBorder": "rgba(255,255,255,1)",
83+
"iosStatusbar": "dark-content",
84+
get statusBarColor() {
85+
return color(this.toolbarDefaultBg)
86+
.darken(0.2)
87+
.hex();
88+
},
89+
get darkenHeader() {
90+
return color(this.tabBgColor)
91+
.darken(0.03)
92+
.hex();
93+
},
94+
// "statusBarColor": "rgba(255,255,255,1)",
95+
// "darkenHeader": "#F0F0F0",
96+
"iconFamily": "Ionicons",
97+
"iconFontSize": 30,
98+
"iconHeaderSize": 29,
99+
"inputFontSize": 17,
100+
"inputBorderColor": "#D9D5DC",
101+
"inputSuccessBorderColor": "#2b8339",
102+
"inputErrorBorderColor": "#ed2f2f",
103+
"inputHeightBase": 50,
104+
"inputColor": "#000",
105+
"inputColorPlaceholder": "#575757",
106+
"btnLineHeight": 19,
107+
"lineHeightH1": 32,
108+
"lineHeightH2": 27,
109+
"lineHeightH3": 22,
110+
"lineHeight": 20,
111+
"listBg": "#FFF",
112+
"listBorderColor": "#c9c9c9",
113+
"listDividerBg": "#f4f4f4",
114+
"listBtnUnderlayColor": "#DDD",
115+
"listItemPadding": 8,
116+
"listNoteColor": "#808080",
117+
"listNoteSize": 13,
118+
"defaultProgressColor": "#E4202D",
119+
"inverseProgressColor": "#1A191B",
120+
"radioBtnSize": 25,
121+
"radioSelectedColorAndroid": "rgba(0,0,0,1)",
122+
"radioBtnLineHeight": 29,
123+
"segmentBackgroundColor": "rgba(255,255,255,1)",
124+
"segmentActiveBackgroundColor": "rgba(255,255,255,1)",
125+
"segmentTextColor": "rgba(0,0,0,1)",
126+
"segmentActiveTextColor": "rgba(0,0,0,1)",
127+
"segmentBorderColor": "rgba(255,255,255,1)",
128+
"segmentBorderColorMain": "#3F51B5",
129+
"defaultSpinnerColor": "#45D56E",
130+
"inverseSpinnerColor": "#1A191B",
131+
"tabDefaultBg": "rgba(255,255,255,1)",
132+
"topTabBarTextColor": "rgba(0,0,0,1)",
133+
"topTabBarActiveTextColor": "rgba(0,0,0,1)",
134+
"topTabBarBorderColor": "rgba(0,0,0,1)",
135+
"topTabBarActiveBorderColor": "rgba(0,0,0,1)",
136+
"tabBgColor": "#F8F8F8",
137+
"tabFontSize": 15,
138+
"textColor": "#000",
139+
"inverseTextColor": "#fff",
140+
"noteFontSize": 14,
141+
"defaultTextColor": "#000",
142+
"titleFontfamily": "Roboto",
143+
"titleFontSize": 19,
144+
"subTitleFontSize": 14,
145+
"subtitleColor": "#FFF",
146+
"titleFontColor": "rgba(0,0,0,1)",
147+
"borderRadiusBase": 2,
148+
"borderWidth": 0.5,
149+
"contentPadding": 10,
150+
"dropdownLinkColor": "#414142",
151+
"inputLineHeight": 24,
152+
"deviceWidth": 1680,
153+
"deviceHeight": 866,
154+
"isIphoneX": isIphoneX,
155+
"inputGroupRoundedBorderRadius": 30
156+
}

‎src/App.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
1-
import React, {Component} from 'react';
1+
import React, {Component,Fragment} from 'react';
22
import {StyleSheet} from 'react-native';
33
import AppRoutes from './AppRoutes';
4+
import {StyleProvider} from 'native-base';
45

56
//splash screen
67
import SplashScreen from 'react-native-splash-screen';
78

9+
//apply theme
10+
import getTheme from './../native-base-theme/components';
11+
import blackWhite from "../native-base-theme/variables/blackWhite";
12+
813
export default class App extends Component {
914
componentDidMount() {
1015
SplashScreen.hide()
1116
}
1217

1318
render() {
1419
return (
15-
<AppRoutes/>
20+
<StyleProvider style={getTheme(blackWhite)}>
21+
<Fragment>
22+
<AppRoutes/>
23+
</Fragment>
24+
</StyleProvider>
1625
);
1726
}
1827
}

‎src/AppRoutes.js‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
1-
import {createStackNavigator, createAppContainer} from "react-navigation";
1+
import {createStackNavigator, createDrawerNavigator,createAppContainer} from "react-navigation";
22
import React, {Component} from 'react';
3-
import Home from './components/presentational/home/Home';
43
import AppText from './components/presentational/appText/AppText';
54
import Sample from './components/containers/sampleContainer/SampleContainer';
5+
import SideBar from "./baseComponents/Sidebar/SideBar";
66

7-
//navigator routes can be exported as objects
8-
exportconst allRoutes = {
7+
/********************* Drawer Navigator ***************/
8+
const allRoutesDrawerNavigator = {
99
Home: { screen: Sample},
1010
SecondScreen: { screen: AppText}
1111
};
12-
export const initialRoute = {
13-
initialRouteName: 'Home',
12+
13+
const initialRoutesDrawerNavigator = {
14+
initialRouteName: "Home",
15+
contentOptions: {
16+
activeTintColor: "#e91e63"
17+
},
18+
contentComponent: props => <SideBar {...props} />
19+
};
20+
21+
const Drawer = createDrawerNavigator(allRoutesDrawerNavigator, initialRoutesDrawerNavigator);
22+
23+
24+
/********************* Stack Navigator ***************/
25+
const allRoutesStackNavigator = {
26+
Drawer: { screen: Drawer }
1427
};
15-
const stack = createStackNavigator(allRoutes, initialRoute);
1628

17-
export default createAppContainer(stack);
29+
const initialRouteStackNavigator = {
30+
initialRouteName: 'Drawer',
31+
headerMode: 'none', //removing default header
32+
};
33+
34+
const AppNavigator = createStackNavigator(allRoutesStackNavigator, initialRouteStackNavigator);
35+
36+
const AppContainer = createAppContainer(AppNavigator);
37+
38+
export default AppContainer;
1839

1940

‎src/baseComponents/Header/Header.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, {Component} from 'react';
2+
import {Header, Left, Body, Right, Button, Icon, Title, Text} from 'native-base';
3+
import { withNavigation } from 'react-navigation';
4+
5+
class BaseHeader extends Component {
6+
render(){
7+
const {navigation} = this.props;
8+
const currentRouter = this.props.navigation.state.routeName;
9+
return (
10+
<Header>
11+
<Left>
12+
<Button onPress={() => currentRouter === 'Home' ? this.props.navigation.openDrawer() : this.props.navigation.goBack()} transparent>
13+
<Icon name={currentRouter === 'Home'?'menu': 'arrow-back'}/>
14+
</Button>
15+
</Left>
16+
<Body>
17+
<Title>React Native Redux</Title>
18+
</Body>
19+
</Header>
20+
)
21+
}
22+
}
23+
export default withNavigation(BaseHeader);
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { Component } from "react";
2+
import { Image, FlatList } from "react-native";
3+
import { withNavigation } from 'react-navigation';
4+
import {
5+
Content,
6+
Text,
7+
ListItem,
8+
Icon,
9+
Container,
10+
Left,
11+
Right,
12+
Badge
13+
} from "native-base";
14+
import styles from "./style";
15+
16+
const drawerCover = {uri: "https://webgradients.com/public/webgradients_png/026%20Saint%20Petersburg.png"};
17+
const drawerImage = require("./../../../assets/logo.png");
18+
const datas = [
19+
{
20+
name: "Home",
21+
route: "Home",
22+
key:"Home",
23+
icon: "home",
24+
25+
},
26+
{
27+
name: "Second View",
28+
route: "SecondScreen",
29+
key:"SecondRoute",
30+
icon: "navigate",
31+
types: 10,
32+
bg: '#000'
33+
}
34+
];
35+
36+
class BaseSideBar extends Component {
37+
constructor(props) {
38+
super(props);
39+
this.state = {
40+
shadowOffsetWidth: 1,
41+
shadowRadius: 4
42+
};
43+
}
44+
45+
renderItem(data){
46+
return (
47+
<ListItem
48+
button
49+
noBorder
50+
onPress={() => this.props.navigation.navigate(data.route)}
51+
>
52+
<Left>
53+
<Icon
54+
active
55+
name={data.icon}
56+
style={{ color: "#777", fontSize: 26, width: 30 }}
57+
/>
58+
<Text style={styles.text}>
59+
{data.name}
60+
</Text>
61+
</Left>
62+
{data.types &&
63+
<Right style={{ flex: 1 }}>
64+
<Badge
65+
style={{
66+
borderRadius: 3,
67+
height: 25,
68+
width: 72,
69+
backgroundColor: data.bg
70+
}}
71+
>
72+
<Text
73+
style={styles.badgeText}
74+
>{`${data.types}`}</Text>
75+
</Badge>
76+
</Right>}
77+
</ListItem>
78+
)
79+
}
80+
81+
render() {
82+
return (
83+
<Container>
84+
<Content
85+
bounces={false}
86+
style={{ flex: 1, backgroundColor: "#fff", top: -1 }}>
87+
<Image source={drawerCover} style={styles.drawerCover} />
88+
<Image square style={styles.drawerImage} source={drawerImage} />
89+
<FlatList
90+
data={datas}
91+
renderItem={({item}) => this.renderItem(item)}
92+
/>
93+
</Content>
94+
</Container>
95+
);
96+
}
97+
}
98+
99+
export default withNavigation(BaseSideBar);

‎src/baseComponents/Sidebar/style.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const React = require("react-native");
2+
const { Platform, Dimensions } = React;
3+
4+
const deviceHeight = Dimensions.get("window").height;
5+
const deviceWidth = Dimensions.get("window").width;
6+
7+
export default {
8+
drawerCover: {
9+
alignSelf: "stretch",
10+
height: deviceHeight / 3.5,
11+
width: null,
12+
position: "relative",
13+
marginBottom: 10
14+
},
15+
drawerImage: {
16+
position: "absolute",
17+
left: Platform.OS === "android" ? deviceWidth / 8 : deviceWidth / 7,
18+
top: Platform.OS === "android" ? deviceHeight / 13 : deviceHeight / 12,
19+
width: 150,
20+
height: 150,
21+
resizeMode: "contain"
22+
},
23+
text: {
24+
fontWeight: Platform.OS === "ios" ? "500" : "400",
25+
fontSize: 16,
26+
marginLeft: 20
27+
},
28+
badgeText: {
29+
fontSize: Platform.OS === "ios" ? 13 : 11,
30+
fontWeight: "400",
31+
textAlign: "center",
32+
marginTop: Platform.OS === "android" ? -3 : undefined
33+
}
34+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /