J'utilise la navigation à réaction. Je veux montrer tiroir sur l'en-tête de l'écran. Actuellement, mon en-tête ne se cache pas sous le tiroir lorsque je l'ouvre.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import CategoryScreen from './CategoryScreen';
import ProductsScreen from './ProductsScreen';
import CartScreen from './CartScreen';
const drawerScreens = createDrawerNavigator ({
Category: CategoryScreen,
Products: ProductsScreen,
},{
initialRouteName: 'Category'
}
)
export default AppStack = createStackNavigator(
{
drawer: {
screen: drawerScreens,
navigationOptions: ({ navigation }) => ({
header: <View style={styles.container}><Text>Header</Text></View>
}),
},
cart: {screen: CartScreen}
},
{
initialRouteName: 'drawer',
}
);
const styles = StyleSheet.create({
container: {
height: 100,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange',
}
})
Alors, comment afficher l'en-tête qui est recouvert ou recouvert d'un tiroir de navigation de tiroir.
Actuellement, il ressemble à ceci
CategoryScreen
et ProductScreen
CategoryScreen
et ProductScreen
Voici ce que je voulais dire
// wrap your screen inside the drawer into StackNavigator
const CategoryNavigator = createStackNavigator({
CategoryList: {
screen: CategoryScreen,
navigationOptions: {
title: "Category",
header: // any custom header here
}
},
});
const drawerScreens = createDrawerNavigator({
Category: CategoryNavigator,
Products: ProductNavigator,
}, {
initialRouteName: 'Category'
})
export default AppStack = createStackNavigator({
drawer: {
screen: drawerScreens,
},
cart: {
screen: CartScreen
}
}, {
initialRouteName: 'drawer',
});
C'est le résultat
Suivra fera un en-tête flottant similaire avec votre capture d'écran
Définissez le mode d’en-tête sur float
(vous n’avez pas besoin d’envelopper CategoryScreen
et ProductScreen
dans StackNavigator
)
export default AppStack = createStackNavigator({
drawer: {
screen: drawerScreens,
},
cart: {
screen: CartScreen
}
}, {
headerMode: 'float', // set this header mode to float so you can share the header
initialRouteName: 'drawer',
});
Ceci est le résultat si vous changez le mode d’en-tête en float
Dans mon cas, je crée mon propre composant d'en-tête et je l'utilise dans chaque page que je souhaite. cela m'a permis de personnaliser l'en-tête avec chaque page.
Absolument, c’est la voie de la porte arrière et j’espère que d’autres personnes auront la réponse exacte à votre question.
Ceci est un exemple...
Page d'accueil:
export default class Home extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Header showBorder={true}/>
<ScrollView>
...
</ScrollView>
</View>
);
}
}
Composant d'en-tête:
export default class Header extends React.PureComponent {
renderTitle = () => {
if (this.props.title) {
return (
<View style={{ flexDirection: 'column', flex: 3, justifyContent: 'center' }}>
<View style={{ alignSelf: 'flex-start' }}>
<Text style={[styles.fontBold, { fontSize:17, color: colors.borderWidthColor }]}>{this.props.title}</Text>
</View>
</View>
)
}
}
renderBack = () => {
if (this.props.back) {
return (
<View style={{ marginTop:3 }}>
<TouchableOpacity
onPress={() => {
this.props.navigation.goBack()
}}
style={{ alignSelf: 'flex-start' }}>
<Icon name="md-arrow-back" size={23} color="black" />
</TouchableOpacity>
</View>
)
}
}
render() {
return (
<View style={[{ height: 70, backgroundColor: this.props.backgroundColor, width: win.width, borderBottomWidth: this.props.showBorder ? 1 : 0 }]}>
<View style={{ flex: 1, flexDirection: 'row', marginTop: Platform.OS == 'ios' ? 17 : 3 }}>
<View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center', marginLeft: 12 }}>
{this.renderBack()}
{this.renderTitle()}
</View>
</View>
</View>
)
}
}