Cách nhận trạng thái điều hướng hiện tại

Question

Tôi đang sử dụng Điều hướng tab của Điều hướng phản ứng từ https://reactnavigation.org/docs/navigators/tab, khi tôi chuyển đổi giữa các màn hình tab, tôi không nhận được bất kỳ trạng thái điều hướng nào trong this.props.navigation.

Tab Navigator:

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 
     } 
    }); 

MẶT DƯỠNG SCREEN:

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> 
    ); 
    } 
} 

tôi nhận được đạo cụ tại màn hình Dashboard khi nó ám chỉ rằng thành phần đầu tiên nhưng tôi không nhận được đạo cụ khi tôi chuyển đổi các tab. Tôi cần lấy tên Màn hình hiện tại tức là TODAY hoặc THISWEEK.

Answer 1

Sự cố của bạn là về "Theo dõi màn hình", react-navigation có hướng dẫn chính thức về điều này. bạn có thể sử dụng onNavigationStateChange để theo dõi màn hình bằng cách sử dụng bộ điều hướng tích hợp sẵn hoặc viết một phần mềm trung gian Redux để theo dõi màn hình nếu bạn muốn tích hợp với Redux. Chi tiết hơn có thể được tìm thấy tại hướng dẫn chính thức: Screen-Tracking. Dưới đây là mã mẫu từ hướng dẫn bằng cách sử dụng 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); 
     } 
    }} 
    /> 
); 

Answer 2

Bạn đã cố định nghĩa navigationOptions trong đối tượng tuyến đường của mình chưa?

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

Bạn cũng có thể đặt navigationOptions thành gọi lại sẽ được gọi với đối tượng điều hướng.

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

Đọc thêm về navigationOptions https://reactnavigation.org/docs/navigators/