Reactjs 反应本机-跟踪屏幕反应导航

我正在使用导航屏幕的反应导航。我使用了嵌套导航、

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

从“../App/Components/HeaderCustom”导入TopNavHeader；
const mainNav=TabNavigator({
主页：{
屏幕：主屏幕，
},
现场：{
屏幕：直播屏幕，
},
电台：{
屏幕：收音机屏幕，
},
} );
导出常量mainStack=StackNavigator({
主页：{
屏幕：主导航，
导航选项：{
标题：(
),
},
},
内容：{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);

class HeaderCustom扩展React.Component{
建造师（道具）{
超级（道具）；
}
_calldiffunc（）{
如果（屏幕=“主屏幕”）{
//做点什么
}否则{
//做点什么
}
}
render（）{
返回(
);
}
}
module.exports=HeaderCustom；
AppRegistry.registerComponent（'myApp'，（）=>HeaderCustom）；

navigationOptions

prop可以是一个以

navigation

为参数的函数

示例

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

export const mainStack=StackNavigator({
主页：{screen:mainNav}，
内容：{screen:ContentScreen}，
}, {
导航选项：（{navigation}）=>({
标题：(
)
}),
});

---

class HeaderCustom扩展React.Component{
建造师（道具）{
超级（道具）；
console.log（props.routeName）；//将记录当前路由的名称
}
render（）{
返回(
);
}
}
module.exports=HeaderCustom；

您好，谢谢您的回复。我尝试了你的答案，但是

console.log（props.routeName）只给我
主页
。当我滑动以更改屏幕时，
props.routeName
没有给我权限。有什么想法吗？用你尝试过的新代码更新你的问题。您需要为每个屏幕设置导航选项。如果你像我的例子一样设置它，它将适用于每个屏幕。事实上，我想在选项卡更改时做一些事情，我问了另一个问题，但没有人回答，所以我认为有其他方法可以做到这一点，然后我问这个当前问题。这个问题的解决方案也是一样的。与传递新参数相比，检查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;