代码之家 › 专栏 › 技术社区 › 1110

如何使用react导航强制抽屉位于页眉上方

react-navigation react-native

0

1110 · 技术社区 · 7 年前

我看到了关于这个问题的其他答案,但我找不到解决办法。
我想显示抽屉始终在应用程序屏幕上方和标题上方。取而代之的是抽屉总是在下面。
我在这里做错了什么:

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>

1 回复 | 直到 7 年前

1

0

Sara Inés Calderón 7 年前

我们的应用程序与此类似。你可以用手把抽屉放在页眉上方 react-navigation 如果是 <Root /> 应用程序的组件(导入到的组件) index.js ). 例如:

export const Root = DrawerNavigator({


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

这会给你类似的东西: