React Native - 堆栈屏幕反应导航

Question

我正在为导航屏幕使用 React 导航。我使用了嵌套导航，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;

React Native - 堆栈屏幕反应导航

React Native - Track Screen react-naviagtion

reactjs

react-native

react-navigation