如何通过反应导航强制抽屉位于标题上方

时间:2018-11-11 22:03:37

标签: react-native react-navigation

我看到了有关此问题的其他答案,但找不到解决方法。
我想始终在应用程序屏幕上方和标题上方显示抽屉。相反,抽屉始终是波纹管接头。
我在这里做错了什么

const AppNavigation = createStackNavigator(
  {
    Main: { screen: Main, navigationOptions: {
        title: "Main"
      } },
    Home: { screen: Home, navigationOptions: {
        title: "Home"
      } }
  },
  {
    initialRouteName: "Main"
  }
);

const DrawerNavigation = createDrawerNavigator(
    {
      Home: Home, 
      Main: Main
    },
    {
        initialRouteName: "Main"
    }
  );

  App = createStackNavigator({
    drawer: {
      screen: DrawerNavigation,
    },
    app: {
      screen: AppNavigation
    }
  }, {
    initialRouteName: 'drawer',
    navigationOptions: ({navigation}) => ({
          headerStyle: {backgroundColor: '#a9a9a9'},
          title: 'Welcome!',
          headerTintColor: 'white',
          headerLeft: <Text onPress={() =>
            navigation.dispatch(DrawerActions.toggleDrawer())}>Menu</Text>
        })
  });

export default () => (
  <View style={{ flex: 1 }}>
    <App />
  </View>

enter image description here

1 个答案:

答案 0 :(得分:0)

我们的应用与此类似。如果抽屉是应用程序的react-navigation组件(您导入到<Root />的组件),则可以使用index.js将抽屉放在标题上方。例如:

export const Root = DrawerNavigator({


 Tabs: {
    screen: Tabs,
    title: 'Tabs'
  },
  STACK1: {
    screen: STACK1,
    title: 'STACK1',
  },
  STACK2: {
    screen: STACK2,
    title: 'STACK2',
  },
});

那会给你这样的东西:

enter image description here