使用createDrawerNavigator 时，如何让Header 也滑动？

Question

已解决

我找到了解决方案，如下面的答案所示。

我已经尝试了很多不同的方法来解决这个问题..

为了让 Header 不在抽屉上方，我在 DrawerNavigator 中嵌套了导航器。打开 header（使用属性 drawerType: 'slide'）时，它会滑动嵌套导航器的所有内容，但不会滑动 header 本身。 header 保留其位置，抽屉内容呈现在 header.

下方

除了在嵌套导航器中为每个组件单独渲染之外，还有什么方法可以制作 header 幻灯片吗？

如有必要，我会 post 我的一些代码，但如果我必须 link 所有可能相关的代码，那将是相当多的。我主要想知道我想要的是否可行

提前致谢！

编辑：

为了重现这个问题（为了提供一个易于理解的 code-snippet），我意识到我实际上已经将 header 设置为抽屉导航器的一部分。我这样做是为了能够使用自定义 header，并且我在嵌套堆栈中设置 header 的每一次尝试都导致它被抽屉覆盖。要么，通过不出现，当给抽屉 header: null，或者当根本不提供任何 header 时，返回默认（空白）header，而不是我的自定义。

我将进一步尝试解决这个问题，并在当天结束前提供 code-snippet 解决方案或承认失败。

Answer 1

我最终解决了我的问题。我显然需要做的是将我的 bottomTabNavigator 放在一个 stacknavigator 中，然后可以将其放在 DrawerNavigator 中。

我试图使代码尽可能紧凑，以防其他人最终遇到与我相同的问题。

页眉和屏幕

const Header = () => <View style={{height: 50, width: '100%', backgroundColor: 'yellow'}}></View>

const Screen = ({color, navigation}) => {
  return (
    <View style={{flex: 1, backgroundColor: color}}>
      <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
        <View style={{backgroundColor: 'white', width: 50, height: 50}}></View> 
      </TouchableOpacity>
    </View>
  );
}

BottomTabNavigator 和 StackNavigator

const Bottom = createBottomTabNavigator(
{
  ScreenOne: {
    screen: props => <Screen color='green' {...props} />
  },
  ScreenTwo: {
    screen: props => <Screen color='yellow' {...props} />
  }
},
{
  initialRouteName: 'ScreenOne',
  tabBarOptions: {
    activeTintColor: "blue",
    inactiveTintColor: "grey",
  },
  navigationOptions: {
    header: () => <Header />
  }
});

const Main = createStackNavigator(
{
  BottomTab: Bottom
});

DrawerNavigator 和 AppContainer

const DrawerNavigator = createDrawerNavigator(
{
  MainFlow: {
    screen: Main,
    navigationOptions: {
      header: null
    }
  }  
},
{
  hideStatusBar: false,
  drawerType: 'slide',
  drawerBackgroundColor: 'rgba(255,255,255,.9)',
  overlayColor: 'rgba(0,0,0,0)',
  drawerLockMode: 'locked-open',
  contentOptions: {
    activeTintColor: '#fff',
    activeBackgroundColor: '#6b52ae',
  },
  navigationOptions: {
    header: null
  }
});

export const AppContainer = createAppContainer(DrawerNavigator);

使用createDrawerNavigator 时，如何让Header 也滑动？

How to make Header slide aswell when using createDrawerNavigator?

javascript

navigation-drawer

react-native