kylefang/react-native-paper
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-paper.git synced 2026-06-13 01:28:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use own toolbar in examples (#159)

Browse Source 
* refactor: use own toolbar in examples

* refactor: fix missing space

* refactor: remove useless code line
This commit is contained in:
Luke Walczak
2017-10-09 16:47:22 +02:00
committed by Satyajit Sahoo
parent 658a8aeab8
commit 129a4e4a9a
2 changed files with 91 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
example/src/RootNavigator.js
View File

@@ -1,21 +1,47 @@
/* @flow */
import React from 'react';
import Expo from 'expo';
import { StackNavigator } from 'react-navigation';
import { Colors } from 'react-native-paper';
import { Platform, StatusBar } from 'react-native';
import { Toolbar } from 'react-native-paper';
import ExampleList, { examples } from './ExampleList';
const MORE_ICON = Platform.OS === 'ios' ? 'more-horiz' : 'more-vert';
const routes = Object.keys(examples)
.map(id => ({ id, item: examples[id] }))
.reduce((acc, { id, item }) => {
const Comp = item;
const Screen = props => <Comp {...props} />;
Screen.navigationOptions = {
title: Comp.title,
/* $FlowFixMe */
...Comp.navigationOptions,
Screen.navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
header: (
<Toolbar
dark
statusBarHeight={
Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
}
>
{!params.showLeftIcon && (
<Toolbar.BackAction onPress={() => navigation.goBack()} />
)}
<Toolbar.Content
title={Comp.title}
subtitle={params.showSubtitle ? 'Subtitle' : null}
/>
{params.showSearchIcon && (
<Toolbar.Action icon="search" onPress={() => {}} />
)}
{!params.showMoreIcon && (
<Toolbar.Action icon={MORE_ICON} onPress={() => {}} />
)}
</Toolbar>
),
/* $FlowFixMe */
...Comp.navigationOptions,
};
};
return {
@@ -31,12 +57,14 @@ export default StackNavigator(
},
{
navigationOptions: {
headerTintColor: Colors.white,
headerStyle: {
backgroundColor: Colors.indigo500,
paddingTop: Expo.Constants.statusBarHeight,
height: 56 + Expo.Constants.statusBarHeight,
},
header: (
<Toolbar
dark
statusBarHeight={Platform.OS === 'ios' ? 20 : StatusBar.currentHeight}
>
<Toolbar.Content title="Examples" />
</Toolbar>
),
},
}
);

84
example/src/ToolbarExample.js
View File

@@ -8,15 +8,38 @@ const MORE_ICON = Platform.OS === 'ios' ? 'more-horiz' : 'more-vert';
export default class ToolbarExample extends Component {
static title = 'Toolbar';
static navigationOptions = {
header: null,
static navigationOptions = ({ navigation }) => {
return {
header: (
<Toolbar
dark
statusBarHeight={Platform.OS === 'ios' ? 20 : StatusBar.currentHeight}
>
{navigation.params.showLeftIcon && (
<Toolbar.BackAction
onPress={() => this.props.navigation.goBack()}
/>
)}
<Toolbar.Content
title="Title"
subtitle={navigation.params.showSubtitle ? 'Subtitle' : null}
/>
{navigation.params.showSearchIcon && (
<Toolbar.Action icon="search" onPress={() => {}} />
)}
{navigation.params.showMoreIcon && (
<Toolbar.Action icon={MORE_ICON} onPress={() => {}} />
)}
</Toolbar>
),
};
};
state = {
showLeftIcon: true,
showSearchIcon: Platform.OS !== 'ios',
showSearchIcon: false,
showMoreIcon: true,
showSubtitle: Platform.OS !== 'ios',
showSubtitle: false,
};
render() {
@@ -26,59 +49,54 @@ export default class ToolbarExample extends Component {
showMoreIcon,
showSubtitle,
} = this.state;
return (
<View style={styles.container}>
<Toolbar
dark
statusBarHeight={Platform.OS === 'ios' ? 20 : StatusBar.currentHeight}
>
{showLeftIcon && (
<Toolbar.BackAction
onPress={() => this.props.navigation.goBack()}
/>
)}
<Toolbar.Content
title="Title"
subtitle={showSubtitle ? 'Subtitle' : null}
/>
{showSearchIcon && (
<Toolbar.Action icon="search" onPress={() => {}} />
)}
{showMoreIcon && (
<Toolbar.Action icon={MORE_ICON} onPress={() => {}} />
)}
</Toolbar>
<View style={styles.content}>
<Button
accent
raised
onPress={() =>
this.setState({ showLeftIcon: !this.state.showLeftIcon })}
onPress={() => {
this.setState({ showLeftIcon: !this.state.showLeftIcon });
this.props.navigation.setParams({
showLeftIcon: !!showLeftIcon,
});
}}
>
{`Left icon: ${showLeftIcon ? 'On' : 'Off'}`}
</Button>
<Button
accent
raised
onPress={() =>
this.setState({ showSubtitle: !this.state.showSubtitle })}
onPress={() => {
this.setState({ showSubtitle: !this.state.showSubtitle });
this.props.navigation.setParams({
showSubtitle: !showSubtitle,
});
}}
>
{`Subtitle: ${showSubtitle ? 'On' : 'Off'}`}
</Button>
<Button
accent
raised
onPress={() =>
this.setState({ showSearchIcon: !this.state.showSearchIcon })}
onPress={() => {
this.setState({ showSearchIcon: !this.state.showSearchIcon });
this.props.navigation.setParams({
showSearchIcon: !showSearchIcon,
});
}}
>
{`Search icon: ${showSearchIcon ? 'On' : 'Off'}`}
</Button>
<Button
accent
raised
onPress={() =>
this.setState({ showMoreIcon: !this.state.showMoreIcon })}
onPress={() => {
this.setState({ showMoreIcon: !this.state.showMoreIcon });
this.props.navigation.setParams({
showMoreIcon: !!showMoreIcon,
});
}}
>
{`More icon: ${showMoreIcon ? 'On' : 'Off'}`}
</Button>