J'utilise react-navigation avec mon application native react. J'ai créé un navigateur d'onglet inférieur et je souhaite utiliser l'en-tête intégré sur mon écran. Mais l'en-tête n'apparaît pas. Il n'y a pas d'erreurs ou d'avertissements.
app.js:
class upload extends React.Component {
static navigationOptions = {
title: 'Upload'
};
constructor(props) {
super(props);
...
upload.js
const TabStack = createBottomTabNavigator({
Upload: {
screen: upload,
navigationOption: {
headerTitle: "Upload"
}
},
Profile: {
screen: profile,
navigationOption: {
headerTitle: "Profile"
}
}
});
const MainStack = createSwitchNavigator(
{
Home: { screen: TabStack }
},
{
initialRouteName: 'Home'
}
);
Je sais déclarer navigationOptions code > dans les composants n'est probablement pas nécessaire car il est déjà déclaré dans app.js, mais c'est juste pour montrer qu'aucune approche ne fonctionne.
Comment résoudre ce problème?
4 Réponses :
TabNavigator n'est pas livré avec un Header . Le cas le plus courant est de faire de votre TabNavigator le navigateur racine , et de faire de chaque onglet un StackNavigator dont vous obtiendriez alors l'en-tête car il fait partie de le StackNavigator par défaut.
votre approche suggérée a-t-elle des implications sur le rendement? Plus de frais généraux en faisant de chaque onglet un StackNavigator?
Je suggère que si vous avez besoin d'un seul écran pour chaque onglet, de créer un EN-TÊTE PERSONNALISÉ et de l'ajouter manuellement à vos écrans, je l'ai fait moi-même, et ce n'est pas si difficile. Il n'est absolument pas nécessaire de créer StackNavigator par onglet, si vous voulez rendre un écran par pile
Un navigateur doit être beaucoup plus complexe qu'un simple composant | écran,
MyTabs = tabNavigator
<Stack.Navigator>
<Stack.Screen name="MyAccount" component={MyTabs} />
</Stack.Navigator>
1) Use tabNavigator inside stack navigator as it comes with inbuilt header
functionality.
2) stack navigator do not have inbuilt header
La documentation de React Navigation également suggère en ajoutant une navigation dans la pile pour chaque onglet.
L'écran bottomTabNavigation n'a pas d'en-tête, mais un StackNavigator normal, vous pouvez donc faire en sorte que l'onglet inférieur ouvre un StackNavigator normal.
Pensez à Instagram:
Vous ouvrez votre onglet d'accueil , puis entrez un profil . Lorsque vous revenez en arrière, vous souhaitez toujours être dans l'onglet d'accueil. C'est donc une navigation de pile dans une navigation par onglets :)
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: "Custom title" }}
/>
Ensuite, l'écran StackNavigator ajoutera un en-tête basé sur le nom de l'écran. Vous pouvez également définir un titre d'en-tête personnalisé:
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName="Feed">
<HomeStack.Screen name="Feed" component={FeedScreen} />
<HomeStack.Screen name="Profile" component={ProfileScreen} />
</HomeStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home"component={HomeStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
ça marche pour moi. essayez-le comme ci-dessous
const TabStack = createBottomTabNavigator({
Upload: {
screen: createStackNavigator({Home: HomeScreen}),,
navigationOption: {
headerTitle: "Upload"
}
},
Profile: {
screen: profile,
navigationOption: {`enter code here`
headerTitle: "Profile"
}
}
});
Veuillez ne pas publier uniquement le code comme réponse, mais également expliquer ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement plus utiles et de meilleure qualité, et sont plus susceptibles d'attirer des votes positifs