在React Navigationv2中为createDrawerNavigator设置每个屏幕的标题标题和右侧标题按钮

时间:2018-07-31 12:20:41

标签: react-native navigation-drawer react-navigation

我希望抽屉的每个屏幕都具有自己的标题。像下面的代码:

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父母的屏幕。

0 个答案:

没有答案