web-dev-qa-db-fra.com

Comment obtenir l'état de navigation actuel

J'utilise le navigateur d'onglets de React Navigation à partir de https://reactnavigation.org/docs/navigators/tab , lorsque je bascule entre les écrans d'onglets, je n'ai aucun état de navigation dans this.props.navigation.

Navigateur Onglet:

    import React, { Component } from 'react';
    import { View, Text, Image} from 'react-native';
    import DashboardTabScreen from 'FinanceBakerZ/src/components/dashboard/DashboardTabScreen';
    import { TabNavigator } from 'react-navigation';


       render() {
        console.log(this.props.navigation);   

        return (
          <View>
              <DashboardTabNavigator  />
          </View>
        );
      }



    const DashboardTabNavigator = TabNavigator({
      TODAY: {
        screen: DashboardTabScreen
      },
      THISWEEK: {
        screen: DashboardTabScreen
      }
    });

ÉCRAN DE TABLEAU DE BORD: 

import React, { Component } from 'react';
import { View, Text} from 'react-native';

export default class DashboardTabScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {};
    console.log('props', props);

  }

  render() {
    console.log('props', this.props);
    return (
      <View style={{flex: 1}}>
        <Text>Checking!</Text>
      </View>
    );
  }
}

Je reçois des accessoires dans Dashboard Screen quand il convertit le composant en premier, mais je ne reçois pas d'accessoires lorsque je change d'onglet. Je dois obtenir le nom d’écran actuel, c’est-à-dire AUJOURD’HUI ou THISWEEK.

reactjsreact-nativereact-reduxreact-navigation
7
Ahsan Ali

Votre problème concerne le "Suivi de l'écran", react-navigation dispose d'un guide officiel pour cela. vous pouvez utiliser onNavigationStateChange pour suivre l'écran à l'aide du conteneur de navigation intégré ou écrire un middleware Redux pour suivre l'écran si vous souhaitez l'intégrer à Redux. Vous trouverez plus de détails dans le guide officiel: Screen-Tracking . Vous trouverez ci-dessous un exemple de code tiré du guide en utilisant onNavigationStateChange:

import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);

// gets the current screen from navigation state
function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}

const AppNavigator = StackNavigator(AppRouteConfigs);

export default () => (
  <AppNavigator
    onNavigationStateChange={(prevState, currentState) => {
      const currentScreen = getCurrentRouteName(currentState);
      const prevScreen = getCurrentRouteName(prevState);

      if (prevScreen !== currentScreen) {
        // the line below uses the Google Analytics tracker
        // change the tracker here to use other Mobile analytics SDK.
        tracker.trackScreenView(currentScreen);
      }
    }}
  />
);
9
ufxmeng

Vérifiez d'abord toutes les propriétés, comme

<Text>{JSON.stringify(this.props, null, 2)}</Text>

Au-dessus du tableau json, vous verrez l’état actuel de la navigation sous routeName index i.e.

this.props.navigation.state.routeName
5
vinod

Avez-vous essayé de définir les options de navigation dans votre objet route?

const DashboardTabNavigator = TabNavigator({
  TODAY: {
    screen: DashboardTabScreen
    navigationOptions: {
     title: 'TODAY',
    },
  },
})

Vous pouvez également définir navigationOptions sur un rappel qui sera appelé avec l'objet de navigation.

const DashboardTabNavigator = TabNavigator({
  TODAY: {
    screen: DashboardTabScreen
    navigationOptions: ({ navigation }) => ({
     title: 'TODAY',
     navigationState: navigation.state,
    })
  },
})

En savoir plus sur navigationOptions https://reactnavigation.org/docs/navigators/

1
devlighted