forked from vergnet/application-amicale
Start using react navigation header
This commit is contained in:
parent
cec72be88c
commit
14960794bc
4 changed files with 68 additions and 24 deletions
navigation
screens/Proximo
|
@ -3,7 +3,6 @@ import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
|
|||
import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
|
||||
|
||||
import HomeScreen from '../screens/HomeScreen';
|
||||
import PerfHomeScreen from '../screens/PerfHomeScreen';
|
||||
import PlanningScreen from '../screens/PlanningScreen';
|
||||
import PlanningDisplayScreen from '../screens/PlanningDisplayScreen';
|
||||
import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
|
||||
|
@ -15,6 +14,8 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
|
|||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import AsyncStorageManager from "../utils/AsyncStorageManager";
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
|
||||
const TAB_ICONS = {
|
||||
Home: 'triangle',
|
||||
|
@ -26,13 +27,24 @@ const TAB_ICONS = {
|
|||
|
||||
const ProximoStack = createStackNavigator();
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
||||
},
|
||||
headerTitle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
function ProximoStackComponent() {
|
||||
return (
|
||||
<ProximoStack.Navigator
|
||||
initialRouteName="ProximoMainScreen"
|
||||
mode='card'
|
||||
headerMode="none"
|
||||
headerMode="float"
|
||||
screenOptions={{
|
||||
headerTintColor: 'white',
|
||||
headerStyle: styles.header,
|
||||
gestureEnabled: true,
|
||||
cardOverlayEnabled: true,
|
||||
...TransitionPresets.SlideFromRightIOS,
|
||||
|
@ -40,16 +52,23 @@ function ProximoStackComponent() {
|
|||
>
|
||||
<ProximoStack.Screen
|
||||
name="ProximoMainScreen"
|
||||
options={{
|
||||
title: 'Proximo',
|
||||
}}
|
||||
component={ProximoMainScreen}
|
||||
/>
|
||||
<ProximoStack.Screen
|
||||
name="ProximoListScreen"
|
||||
options={{
|
||||
title: 'Articles'
|
||||
}}
|
||||
component={ProximoListScreen}
|
||||
/>
|
||||
<ProximoStack.Screen
|
||||
name="ProximoAboutScreen"
|
||||
component={ProximoAboutScreen}
|
||||
options={{
|
||||
title: 'Proximo',
|
||||
...TransitionPresets.ModalSlideFromBottomIOS,
|
||||
}}
|
||||
/>
|
||||
|
@ -116,7 +135,7 @@ function HomeStackComponent() {
|
|||
<HomeStack.Navigator
|
||||
initialRouteName="HomeScreen"
|
||||
mode='card'
|
||||
headerMode="none"
|
||||
headerMode="float"
|
||||
screenOptions={{
|
||||
gestureEnabled: true,
|
||||
cardOverlayEnabled: true,
|
||||
|
|
|
@ -20,7 +20,6 @@ export default class ProximoAboutScreen extends React.Component<Props> {
|
|||
const nav = this.props.navigation;
|
||||
return (
|
||||
<Container>
|
||||
<CustomHeader navigation={nav} title={i18n.t('screens.proximo')} hasBackButton={true}/>
|
||||
<Content padder>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Body, Container, Content, H1, H3, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
|
||||
import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
|
||||
import CustomHeader from "../../components/CustomHeader";
|
||||
import {FlatList, Image, Platform, View} from "react-native";
|
||||
import Touchable from 'react-native-platform-touchable';
|
||||
|
@ -147,16 +147,45 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
break;
|
||||
}
|
||||
this.setupSortIcons(mode, isReverse);
|
||||
this.sortMenuRef.hide();
|
||||
if (this.sortMenuRef !== undefined)
|
||||
this.sortMenuRef.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the sort mode from state when components are ready
|
||||
*/
|
||||
componentDidMount() {
|
||||
const button = this.getSortMenu.bind(this);
|
||||
const title = this.getSearchBar.bind(this);
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: button,
|
||||
headerTitle: title,
|
||||
});
|
||||
this.setSortMode(this.state.currentSortMode, this.state.isSortReversed);
|
||||
}
|
||||
|
||||
getSearchBar() {
|
||||
return (
|
||||
<Body style={{width: '100%'}}>
|
||||
<Item
|
||||
style={{
|
||||
width: '100%',
|
||||
marginBottom: 7
|
||||
}}>
|
||||
<MaterialCommunityIcons
|
||||
name={'magnify'}
|
||||
size={26}
|
||||
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
|
||||
<Input
|
||||
ref="searchInput"
|
||||
placeholder={i18n.t('proximoScreen.search')}
|
||||
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
|
||||
onChangeText={this.onSearchStringChange}/>
|
||||
</Item>
|
||||
</Body>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* get color depending on quantity available
|
||||
*
|
||||
|
@ -299,7 +328,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
ref={this.onMenuRef}
|
||||
button={
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
style={{padding: 6, marginRight: 10}}
|
||||
onPress={this.onSortMenuPress}>
|
||||
<MaterialCommunityIcons
|
||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||
|
@ -364,14 +393,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
|||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||
{this.getModalContent()}
|
||||
</Modalize>
|
||||
<CustomHeader
|
||||
hasBackButton={true}
|
||||
navigation={nav}
|
||||
hasSearchField={true}
|
||||
searchCallback={this.onSearchStringChange}
|
||||
shouldFocusSearchBar={this.shouldFocusSearchBar}
|
||||
rightButton={this.getSortMenu()}
|
||||
/>
|
||||
<FlatList
|
||||
data={this.state.currentlyDisplayedData}
|
||||
extraData={this.state.currentlyDisplayedData}
|
||||
|
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Platform, View} from 'react-native'
|
||||
import {Body, Left, ListItem, Right, Text} from 'native-base';
|
||||
import {Body, Left, ListItem, Right, Text, Container} from 'native-base';
|
||||
import i18n from "i18n-js";
|
||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import Touchable from "react-native-platform-touchable";
|
||||
import BaseContainer from "../../components/BaseContainer";
|
||||
import WebSectionList from "../../components/WebSectionList";
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
||||
|
@ -41,6 +40,14 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
this.createDataset = this.createDataset.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const button = this.getRightButton.bind(this);
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: button
|
||||
,
|
||||
});
|
||||
}
|
||||
|
||||
static sortFinalData(a: Object, b: Object) {
|
||||
let str1 = a.type.name.toLowerCase();
|
||||
let str2 = b.type.name.toLowerCase();
|
||||
|
@ -150,7 +157,8 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row'
|
||||
flexDirection: 'row',
|
||||
marginRight: 10,
|
||||
}}>
|
||||
<Touchable
|
||||
style={{padding: 6}}
|
||||
|
@ -215,10 +223,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<BaseContainer
|
||||
navigation={nav}
|
||||
headerTitle={i18n.t('screens.proximo')}
|
||||
headerRightButton={this.getRightButton()}>
|
||||
<Container>
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={nav}
|
||||
|
@ -226,7 +231,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
|
|||
fetchUrl={DATA_URL}
|
||||
renderItem={this.getRenderItem}
|
||||
updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
|
||||
</BaseContainer>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue