React Native - Track Screen react-naviagtion

Question

我正在使用反应导航来导航屏幕。我使用嵌套导航TabNavigator和StackNavigator。我想跟踪HeaderCustom内的屏幕，这样我可以在到达不同的屏幕时调用不同的功能。

Navi.js

import TopNavHeader from '../App/Components/HeaderCustom';
const mainNav = TabNavigator({
  Home: { 
    screen: HomeScreen,
  },
  Live: {
   screen: LiveScreen,
  },
  Radio: {
   screen: RadioScreen,
  },
} );

export const mainStack = StackNavigator({
  Home: { 
    screen: mainNav,
    navigationOptions: {
      header: (
        <HeaderCustom/>
      ),
    },
  },
  Content: { screen: ContentScreen },
});

HeaderCustom.js

class HeaderCustom extends React.Component {
    constructor(props) {
        super(props);
    }

    _CallDiffFunc(){
     if(screen == "home"){
      //do something
     }else{
      //do something
     }
    }

    render() {
        return(
            <View style={styles.topcontainer}>
                <Icon />
                <Icon />
                <Icon />
            </View>
        );
    }
}

module.exports = HeaderCustom;
AppRegistry.registerComponent('myApp', () => HeaderCustom);

Answer 1

navigationOptions prop可以是以navigation为参数的函数。

示例

export const mainStack = StackNavigator({
  Home: { screen: mainNav },
  Content: { screen: ContentScreen },
}, {
  navigationOptions: ({navigation}) => ({
    header: (
      <HeaderCustom routeName={navigation.state.routeName}/>
    )
  }),
});

class HeaderCustom extends React.Component {
    constructor(props) {
      super(props);
      console.log(props.routeName); // Will log current Route's name 
    }

    render() {
        return(
            <View style={styles.topcontainer}>
                <Icon />
                <Icon />
                <Icon />
            </View>
        );
    }
}

module.exports = HeaderCustom;