我希望抽屉的每个屏幕都具有自己的标题。像下面的代码:
const Drawer = createDrawerNavigator(
{
Main: {
path: "/Main",
screen:MainScreen ,
navigationOptions: ({ navigation }) => {
const { state } = navigation;
return {
title: "HAPPY COW",
titleStyle: Style1.CtitleStyle,
headerStyle: Style1.headerStyle,
headerTitleStyle: Style1.titleStyle,
headerLeft: (
<View style={Style1.headerLeft}>
<DrawerToggler navigation={navigation} />
</View>
),
headerRight: (
<View style={Style1.headerRightwithBtn}>
<Icon
name="filter"
size={widthPercentageToDP("8%")}
color="#ffffff"
onPress={() => state.params.FilterModel}
/>
</View>
)
};
}
},
OMain: {
path: "/OMain",
screen: OMainScreen
},
LikeScreen: {
path: "/Like",
screen: LikeScreen
}},
{initialRouteName: "Main",
drawerWidth: widthPercentageToDP("60%"),
contentComponent: SideMenu,
headerMode: "screen"}}
所有屏幕使用以下代码具有相同的标题:
Drawer.navigationOptions = ({ navigation }) => {
return {
title: "HAPPY COW",
titleStyle: Style1.CtitleStyle,
headerStyle: Style1.headerStyle,
headerTitleStyle: Style1.titleStyle,
headerLeft: (
<View style={Style1.headerLeft}>
<DrawerToggler navigation={navigation} />
</View>
),
headerRight: <View style={Style1.headerRight} />
};
};
我的实际任务是单击屏幕标题上的右键,这将触发屏幕组件功能。但这似乎不起作用。
我要为其触发功能的屏幕如下:
export default class MainScreen extends React.PureComponent {
componentWillMount() {
this.props.navigation.setParams({
FilterModel:this.FilterModel
});
FilterModel = () => {
alert("You Called Me!");
};
}
但是,由于我无法创建单独的自定义屏幕标题,因此无法在右侧显示按钮。但是我能够在抽屉中为所有屏幕渲染按钮。这个Drawer
就像另一个StackNavigator
父母的屏幕。