J'ai un tiroir de navigation personnalisé et sur un écran particulier, je ne veux pas qu'il soit disponible.
Ceci est mon code court.
Ce navigateur est également inclus dans le navigateur de commutateur. J'ai creusé dans git-hub et d'autres forums et rien ne fonctionne actuellement. Est-ce que je manque quelque chose? Y a-t-il quelqu'un qui l'a fait fonctionner?
const UserStackNavigation = createStackNavigator({
ProductListScreen: {screen: ProductListScreen},
ProductHistoryScreen: {
screen: ProductHistoryScreen
}
})
const UserNavigation = createDrawerNavigator({
UserStackNavigation: UserStackNavigation
}, {
initialRouteName: 'UserStackNavigation',
contentComponent: CustomDrawerContentComponent,
})
UserStackNavigation.navigationOptions = ({ navigation }) => ({
drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});
export default createAppContainer(UserNavigation)
Il y a aussi un code de travail sur expo mais j'essaye et entraîne l'affichage de doubles navigateurs, et aussi dans l'écran où je ne veux pas montrer le tiroir qu'il apparaît. Ceci est ma tentative de faire référence au code expo
const UserNavigation = createDrawerNavigator({
ProductListScreen: {screen: ProductListScreen},
ProductHistoryScreen: {
screen: ProductHistoryScreen,
navigationOptions: {
drawerLockMode: 'locked-closed'
}
}
}, {
initialRouteName: 'ProductListScreen',
contentComponent: CustomDrawerContentComponent,
})
export default createAppContainer(UserNavigation)
4 Réponses :
Le problème était que j'utilisais Ignite pour générer mon modèle de projet et la version de React-Navigation a été corrigée à 3.0.0. Et après avoir regardé le dernier commentaire sur ce lien , j'ai réalisé que ce n'était pas pas de problème avec ma syntaxe.
J'ai donc supprimé mon dossierpack.lock.json, yarn.lock, node_modules, dans package.json, j'ai défini la version sur ^ 3.0.0 afin d'obtenir la dernière version.
Après tout cela, j'ai fait une installation de fil pour obtenir une mise à jour complète du package. Avec ce changement, mon tiroir de navigation de réaction est passé de 1.0.1 à 1.3.0 et cela a résolu le problème.
J'ai également apporté des modifications à ma navigation qui ressemble maintenant à ceci:
export default class UserNavigation extends React.Component{
render(){
return <Nav />
}
}
const Nav = createAppContainer(
createDrawerNavigator(
{
ProductListScreen: {screen: ProductListScreen},
ProductHistoryScreen: {
screen: ProductHistoryScreen,
navigationOptions:{
drawerLockMode: 'locked-closed'
}
}
}, {
initialRouteName: 'ProductListScreen',
contentComponent: CustomDrawerContentComponent,
}
)
)
Dans la version 5, vous pouvez utiliser
La question initiale est de savoir comment le désactiver dans un écran spécifique uniquement.
Pour désactiver le balayage / le geste dans un seul itinéraire dans React Navigation V5:
Aide à l'importation pour obtenir le nom de l'itinéraire actuel
import {getFocusedRouteNameFromRoute} depuis '@ react-navigation / native' ;
Vérifiez si le nom de l'itinéraire est le même que celui que vous souhaitez désactiver le balayage / le geste
options={({ route }) => {
const routeName = getFocusedRouteNameFromRoute(route);
return {
swipeEnabled: routeName !== 'Profile',
};
}}
Vous pouvez définir des options par écran à l'aide de la propriété "swipeEnabled". Veuillez consulter la page associée de la documentation;
https://reactnavigation.org/ docs / tiroir-navigator / # options
<Drawer.Navigator initialRouteName="Feed">
<Drawer.Screen
name="Feed"
component={Feed}
options={{ swipeEnabled: false }}
/>
<Drawer.Screen
name="Profile"
component={Profile}
options={{ drawerLabel: 'Profile' }}
/>
</Drawer.Navigator>);}