使用React Navigation创建自定义导航标题-React Native

Question

我正在尝试创建自定义导航功能，以便可以使用嵌套在标题中的下拉菜单在屏幕之间进行导航。我正在使用React导航库。如您在此视频https://drive.google.com/file/d/14eCaPWvbnYFtN7NVv5Q04B0zZjarmM6F/view?usp=sharing中所看到的，我已经可以使用BottomTabNavigator在屏幕之间导航。我希望下拉菜单也具有相同的功能（不要问我为什么：p），并根据下拉菜单中选择的值在屏幕之间导航。

这是我的Routes.js文件：

import React from "react";
import { View } from "react-native";
import { createStackNavigator, createBottomTabNavigator } from "react-navigation";
import { Icon } from 'react-native-elements';
import RegistrationScreenC from 'screens/consumer/RegistrationScreenC';
import RecieveMenuScreenC from 'screens/consumer/RecieveMenuScreenC';
import RecieveTrackScreenC from 'screens/consumer/RecieveTrackScreenC';
import RecieveBarCodeScreenC from 'screens/consumer/RecieveBarCodeScreenC';
import RecieveStatusScreenC from 'screens/consumer/RecieveStatusScreenC';
import SendDetailsScreenC from 'screens/consumer/SendDetailsScreenC';
import SendAddressScreenC from 'screens/consumer/SendAddressScreenC';
import SendShipmentScreenC from 'screens/consumer/SendShipmentScreenC';
import SendOverviewScreenC from 'screens/consumer/SendOverviewScreenC';
import SendReceiptScreenC from 'screens/consumer/SendReceiptScreenC';
import ShipmentOverviewScreenC from 'screens/consumer/ShipmentOverviewScreenC';
import Header from 'common/consumer/HeaderC';



export const RegistrationStack = createStackNavigator({
  Registration: {
    screen: RegistrationScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
});


export const SendStack = createStackNavigator({
  SendDetails: {
    screen: SendDetailsScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  SendAddress: {
    screen: SendAddressScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  SendShipment: {
    screen: SendShipmentScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  SendOverview: {
    screen: SendOverviewScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  SendReceipt: {
    screen: SendReceiptScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
});

export const RecieveStack = createStackNavigator({
  RecieveMenu: {
    screen: RecieveMenuScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  RecieveTrack: {
    screen: RecieveTrackScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  RecieveBarCode: {
    screen: RecieveBarCodeScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
  Recieve: {
    screen: RecieveStatusScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
});

export const ViewStack = createStackNavigator({
  ShipmentOverview: {
    screen: ShipmentOverviewScreenC,
    navigationOptions: {
      header: <Header />
    },
  },
});

export const Tabs = createBottomTabNavigator({
  Profile: {
    screen: RecieveStack,
    navigationOptions: {
      tabBarLabel: 'Recieve',
      tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
    },
  },
  Send: {
    screen: SendStack,
    navigationOptions: {
      tabBarLabel: 'Send',
      tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
    },
  },
  Recieve: {
    screen: RegistrationStack,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
    },
  },
  View: {
    screen: ViewStack,
    navigationOptions: {
      tabBarLabel: 'View',
      tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
    },
  },
});

const Routes = createStackNavigator(
  {
    Registration: {
      screen: Tabs,
      navigationOptions: {
        header: <Header />
      }
    }
  },
);

export default Routes;

这是我的下拉菜单代码（在我的标题下呈现）：

import React, { Component } from "react";
import { Container, Header, Content, Icon, Picker, Form } from "native-base";

export default class PickerWithIcon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key0"
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  render() {
    return (
      <Container>
        <Content>
          <Form>
            <Picker
              mode="dropdown"
              iosHeader="Select Options"
              iosIcon={<Icon name="ios-arrow-down-outline" />}
              style={{ width: undefined }}
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              <Picker.Item label="Registration" value="key0" onValueChange={() => this.props.navigation.navigate('Registration')} />
              <Picker.Item label="Recieve" value="key1" onValueChange={() => this.props.navigation.navigate('RecieveMenu')} />
              <Picker.Item label="Send" value="key2" onValueChange={() => this.props.navigation.navigate('SendDetails')} />
            </Picker>
          </Form>
        </Content>
      </Container>
    );
  }
}

这是我的Header.js组件的代码：

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title, Bottom } from 'native-base';
import DropDownMenu from 'common/consumer/DropDownMenuC';


export default class HeaderMultipleIconExample extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>

          </Left>
          <Body>
            <DropDownMenu />
          </Body>
          <Right>
            <Button transparent>
              <Icon name='more' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

我尝试声明一个名为Header的const变量，并在其下嵌套屏幕，但是它不起作用。