我正在尝试在反应导航中获取DrawerNavigator上的标题。我在StackNavigator中有一个DrawerNavigator,抽屉中的所有页面都有一个类似的标题(标题除外)。
const HomeNavigator = createStackNavigator(
{
HomeScreen: { screen: HomeScreen },
HomeRouter: { screen: HomeRouter }
},
{
initialRoute: 'HomeScreen',
});
HomeRouter
是抽屉。
const HomeRouter = createDrawerNavigator(
{
Agenda: { screen: Agenda },
Nieuws: { screen: Nieuws },
....
},
{
contentComponent: SideBar,
drawerWidth: 300,
}
);
现在,这会在抽屉中的每个屏幕上显示标准标题,但这不是我想要的标题。我想定制它,这很困难。 我尝试了两种方法:
withHeader
函数包装,但在react-navigation版本2中不起作用。它会出错。第一个问题:为什么这不起作用?
基本上代码变为:
const HomeNavigator = createStackNavigator(
{
HomeScreen: { screen: HomeScreen },
HomeRouter: { screen: HomeRouter,
navigationOptions: () => ({
header: null
})
}
},
{
initialRoute: 'HomeScreen',
});
然后在HomeRouter
:
const wrap = (name, screen) => {
return(
createStackNavigator({
[name]: { screen: screen }
})
);
};
const HomeRouter = createDrawerNavigator(
{
Agenda: { screen: wrap('Agenda', Agenda)},
...
屏幕定义了自己的标题:
class Agenda extends Component {
static navigationOptions = () => ({
header: (
<MenuHeader title="Agenda" />
)
});
render() { .....
此解决方案有效,但现在我试图将标头代码分解并将其放入包装函数中。
我尝试将navigationOptions作为属性放在Agenda
屏幕上。如果我在定义组件的地方执行此操作,则此方法有效:
class Agenda extends Component {
static navigationOptions = () => ({
header: (
<MenuHeader title="Agenda" />
)
});
render() { ...
}
Agenda.navigationOptions = () => ({
header: (
<MenuHeader title="Agenda" />
)
});
export default Agenda;
此解决方案有效。但仍然使用样板代码。所以我希望将属性navigationOptions
设置为包装函数。但后来我收到了一个错误:
此代码失败:
import Agenda from '../Pages/Agenda';
Agenda.navigationOptions = () => ({
header: (
<MenuHeader title="Agenda" />
)
});
这会产生错误“不变违规。元素类型无效:期望字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。” < / p>
第二个问题:那么为什么在导出之前应用,而导入之后 有效?导入的组件与导出的组件不同吗?我也尝试使用命名导出/导入,但这没有什么区别。