Javascript Girl
  1. Javascript Girl
  3. Accédez à l'écran racine du navigateur de pile imbriqué
Intereting Posts
Faites défiler jusqu'à la page, faites défiler vers le haut du système comme sur une page de téléchargement MEGA.co.nz Angular JS 'Startswith' filtre personnalisé Luttant avec jquery ui sortable et les onglets (souhaitez déplacer des objets autour des onglets) RequireJS et application héritée Comment supprimer les espaces blancs avant et arrière d'une chaîne html donnée? Jquery Vs Mootools qui a de bonnes performances? Pourquoi? Changer le texte de l'élément sans jQuery? Obtenez la valeur d'un bouton radio bootstrap Twitter. JQuery Comment puis-je paginer par ordre décroissant par valeur d'enfant avec une base de feu? Affichage de la largeur de vie et des valeurs de hauteur lors de la modification du redimensionnement de la fenêtre Mode JavaScript pour savoir si un objet est un tableau Remplacement de chaînes avec regex en JavaScript Fonction non définie initialisation taginput bootstrap 3 Phaser.js – Fond de défilement latéral infini? Comment savoir si une fonction est appelée depuis la console ou du code source

Accédez à l'écran racine du navigateur de pile imbriqué

Je suis nouveau pour réagir et essayer de l'apprendre par moi-même, je suis confronté à un problème de navigation sur l'utilisateur vers l'écran racine à partir de l'écran de navigateur stck imbriqué.

Voici quelques-unes de mes cours: –

Index.android.js : – 

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, StatusBar, View } from 'react-native'; import {LoginStack} from './login/loginregisterrouter'; import {StackNavigator } from 'react-navigation'; class reactNavigationSample extends Component { render(){ return ( <LoginStack/> ); } } AppRegistry.registerComponent('MssReactDemo', () => reactNavigationSample);

Loginregisterrouter : – 

 import React from 'react'; import {StackNavigator } from 'react-navigation'; import LoginScreen from './LoginScreen'; import RegisterScreen from './RegisterScreen'; import NavigationContainer from './navigationContainer'; export const LoginStack = StackNavigator({ LoginScreen: { screen: LoginScreen, navigationOptions: { title: 'LoginScreen', } }, RegisterScreen: { screen: RegisterScreen, navigationOptions: ({ navigation }) => ({ title: 'RegisterScreen', }), },NavigationContainer: { screen: NavigationContainer, navigationOptions: ({ navigation }) => ({ title: 'NavigationContainer', header: null, }), }, });

Navigationcontainer.js : – 

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, StatusBar, View } from 'react-native'; import {EasyRNRoute,} from '../parent'; import {StackNavigator } from 'react-navigation'; export default class NavigationContainer extends Component { render(){ return ( <EasyRNRoute/> ); } }

Parent.js : – 

 import React, { Component } from 'react'; import { StyleSheet, Text, StatusBar, View } from 'react-native'; import App from './app'; import DrawerMenu from './Drawer/drawer-toolbar-android'; import BookmarkView from './Pages/bookmark'; import ClientView from './Pages/client'; import InfoView from './Pages/info'; import SettingsView from './Pages/setting'; import { DrawerNavigator, StackNavigator } from 'react-navigation'; export const stackNavigator = StackNavigator({ Info: { screen: InfoView }, Settings: {screen: SettingsView }, Bookmark: {screen: BookmarkView }, Connections: {screen: ClientView}, }, { headerMode: 'none' }); export const EasyRNRoute = DrawerNavigator({ Home: { screen: App, }, Stack: { screen: stackNavigator } }, { contentComponent: DrawerMenu, contentOptions: { activeTintColor: '#e91e63', style: { flex: 1, paddingTop: 15, } } });

Drawer-toolbar-android.js : – 

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, StatusBar, View } from 'react-native'; import { NavigationActions } from 'react-navigation' import { COLOR, ThemeProvider, Toolbar, Drawer, Avatar } from 'react-native-material-ui'; import Container from '../Container'; import LoginScreen from '../login/LoginScreen'; const uiTheme = { palette: { primaryColor: COLOR.green500, accentColor: COLOR.pink500, }, toolbar: { container: { height: 70, paddingTop: 20, }, }, avatar: { container: { backgroundColor: '#333' } } }; export default class DrawerMenu extends Component { constructor(props, context) { super(props, context); this.state = { active: 'people', }; } handleLogoutPress = () => { // AsyncStorage.setItem('SignedUpuser', ''); this.props .navigation .dispatch(NavigationActions.reset( { index: 0, actions: [ NavigationActions.navigate({ routeName: 'LoginScreen'}) ] })); // this.props.navigation.dispatch(NavigationActions.back()); }; _setInfoActive() { this.setState({ active: 'info' }); } render() { return ( <ThemeProvider uiTheme={uiTheme}> <Container> <StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent /> <Toolbar leftElement="arrow-back" onLeftElementPress={() => this.props.navigation.navigate('DrawerClose')} centerElement="Menu" /> <View style={styles.container}> <Drawer> <Drawer.Header > <Drawer.Header.Account style={{ container: { backgroundColor: '#fafafa' }, }} avatar={<Avatar text={'S'} />} // accounts={[ // { avatar: <Avatar text="H" /> }, // { avatar: <Avatar text="L" /> }, // ]} footer={{ dense: true, centerElement: { primaryText: 'Siddharth', secondaryText: 'I am DONE now', }, }} /> </Drawer.Header> <Drawer.Section style={{ label: {color: '#0000ff'} }} divider items={[ { icon: 'bookmark-border', value: 'Bookmarks', active: this.state.active == 'bookmark', onPress: () => { this.setState({ active: 'bookmark' }); this.props.navigation.navigate('Bookmark'); }, }, { icon: 'people', value: 'Connections', active: this.state.active == 'Connection', onPress: () => { this.setState({ active: 'Connection' }); this.props.navigation.navigate('Connections'); }, }, ]} /> <Drawer.Section title="Personal" items={[ { icon: 'info', value: 'Info', active: this.state.active == 'info', onPress: () => { this.setState({ active: 'info' }); //this.props.navigation.navigate('DrawerClose'); this.props.navigation.navigate('Info'); }, }, { icon: 'settings', value: 'Settings', active: this.state.active == 'settings', onPress: () => { this.setState({ active: 'settings' }); this.props.navigation.navigate('Settings'); }, }, { icon: 'logout', value: 'Logout', active: this.state.active == 'logout', onPress: () => { this.handleLogoutPress(); }, }, ]} /> </Drawer> </View> </Container> </ThemeProvider> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, header: { backgroundColor: '#455A64', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });

Ce qui précède est l'architecture de pile que j'utilise dans ma application et comme vous pouvez voir que mon écran principal est l'écran LOGIN et j'ai une option pour LOGOUT depuis l'application dans mon tiroir (menu côté). Ce que je souhaite vraiment, c'est que lorsque l'utilisateur clique sur la connexion, il / elle devrait être redirigé vers l'écran LOGIN. J'ai googlé à ce sujet et j'ai appris à connaître deux façons de le faire, mais les deux méthodes ne fonctionnent pas pour moi, peut-être, je les utilise de manière incorrecte. Je suis donc là pour chercher votre aide.

Les deux méthodes sont : –

1) 

 this.props .navigation .dispatch(NavigationActions.reset( { index: 0, actions: [ NavigationActions.navigate({ routeName: 'LoginScreen'}) ] }));

2) this.props.navigation.dispatch(NavigationActions.back());

Cette question peut sembler bête pour vous mais je suis vraiment coincé à ce stade et je veux simplement savoir comment comprendre ça. Toute aide serait grandement appréciée !!!! Merci d'avance.