Merge pull request #267 from lbryio/back-navigation-part-deux
create navigation button component and handle onPress events properly
This commit is contained in:
commit
30682bf8f5
6 changed files with 51 additions and 10 deletions
|
@ -40,18 +40,25 @@ import {
|
|||
} from 'lbryinc';
|
||||
import { makeSelectClientSetting } from '../redux/selectors/settings';
|
||||
import { decode as atob } from 'base-64';
|
||||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import NavigationButton from '../component/navigationButton';
|
||||
import Constants from '../constants';
|
||||
import discoverStyle from '../styles/discover';
|
||||
import searchStyle from '../styles/search';
|
||||
import SearchRightHeaderIcon from '../component/searchRightHeaderIcon';
|
||||
|
||||
const menuNavigationButton = (navigation) => <NavigationButton
|
||||
name="bars"
|
||||
size={24}
|
||||
style={discoverStyle.drawerMenuButton}
|
||||
iconStyle={discoverStyle.drawerHamburger}
|
||||
onPress={() => navigation.navigate('DrawerOpen')} />
|
||||
|
||||
const discoverStack = StackNavigator({
|
||||
Discover: {
|
||||
screen: DiscoverPage,
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: 'Discover',
|
||||
headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
|
||||
headerLeft: menuNavigationButton(navigation),
|
||||
})
|
||||
},
|
||||
File: {
|
||||
|
@ -76,7 +83,7 @@ const trendingStack = StackNavigator({
|
|||
screen: TrendingPage,
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: 'Trending',
|
||||
headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
|
||||
headerLeft: menuNavigationButton(navigation),
|
||||
})
|
||||
}
|
||||
});
|
||||
|
@ -86,7 +93,7 @@ const walletStack = StackNavigator({
|
|||
screen: WalletPage,
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: 'Wallet',
|
||||
headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
|
||||
headerLeft: menuNavigationButton(navigation),
|
||||
})
|
||||
},
|
||||
TransactionHistory: {
|
||||
|
@ -105,7 +112,7 @@ const rewardsStack = StackNavigator({
|
|||
screen: RewardsPage,
|
||||
navigationOptions: ({ navigation }) => ({
|
||||
title: 'Rewards',
|
||||
headerLeft: <Icon name="bars" size={24} style={discoverStyle.drawerHamburger} onPress={() => navigation.navigate('DrawerOpen')} />,
|
||||
headerLeft: menuNavigationButton(navigation),
|
||||
})
|
||||
}
|
||||
});
|
||||
|
|
4
app/src/component/navigationButton/index.js
Normal file
4
app/src/component/navigationButton/index.js
Normal file
|
@ -0,0 +1,4 @@
|
|||
import { connect } from 'react-redux';
|
||||
import NavigationButton from './view';
|
||||
|
||||
export default connect()(NavigationButton);
|
18
app/src/component/navigationButton/view.js
Normal file
18
app/src/component/navigationButton/view.js
Normal file
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import { TouchableOpacity } from 'react-native';
|
||||
|
||||
|
||||
class NavigationButton extends React.PureComponent {
|
||||
render() {
|
||||
const { iconStyle, name, onPress, size, style } = this.props;
|
||||
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} style={style}>
|
||||
<Icon name={name} size={size} style={iconStyle} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavigationButton;
|
|
@ -9,6 +9,7 @@ import {
|
|||
View
|
||||
} from 'react-native';
|
||||
import Icon from 'react-native-vector-icons/FontAwesome5';
|
||||
import NavigationButton from '../navigationButton';
|
||||
import pageHeaderStyle from '../../styles/pageHeader';
|
||||
|
||||
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
|
||||
|
@ -34,9 +35,13 @@ class PageHeader extends React.PureComponent {
|
|||
{title}
|
||||
</AnimatedText>
|
||||
</View>
|
||||
<TouchableOpacity style={pageHeaderStyle.left}>
|
||||
<Icon name="arrow-left" size={24} onPress={onBackPressed} style={pageHeaderStyle.backIcon} />
|
||||
</TouchableOpacity>
|
||||
<NavigationButton
|
||||
name="arrow-left"
|
||||
style={pageHeaderStyle.left}
|
||||
size={24}
|
||||
iconStyle={pageHeaderStyle.backIcon}
|
||||
onPress={onBackPressed}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
@ -80,8 +80,13 @@ const discoverStyle = StyleSheet.create({
|
|||
textAlign: 'center',
|
||||
color: '#0c604b'
|
||||
},
|
||||
drawerMenuButton: {
|
||||
height: '100%',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
drawerHamburger: {
|
||||
marginLeft: 16
|
||||
marginLeft: 16,
|
||||
marginRight: 16
|
||||
},
|
||||
rightHeaderIcon: {
|
||||
marginRight: 16
|
||||
|
|
|
@ -34,7 +34,8 @@ const pageHeaderStyle = StyleSheet.create({
|
|||
...platformContainerStyles,
|
||||
},
|
||||
backIcon: {
|
||||
marginLeft: 16
|
||||
marginLeft: 16,
|
||||
marginRight: 16
|
||||
},
|
||||
header: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
|
@ -61,6 +62,7 @@ const pageHeaderStyle = StyleSheet.create({
|
|||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
|
|
Loading…
Reference in a new issue