react-native - react 原生，在 TabNavigator 上方显示一个栏，隐藏在滚动条上(就像 Facebook 应用程序一样)

Question

我正在开发一个带有 native react 的应用程序。

我用 tabNavigator和 StackNavigator来自 react-navigation在选项卡之间导航。

现在我想创建一个与 Facebook 应用程序完全相同的选项卡，显示在我的 tabNavigator 上方。 .此选项卡在向下滚动时隐藏。
FlatList组件有 ListHeaderComponent用于渲染他的标题的选项，当向下滚动时也会隐藏。

任何的想法 ？
我在 https://reactnavigation.org/docs/ 上没有找到任何东西或 react-native 文档

Answer 1

看起来像嵌套在 StackNavigator 中的 TabNavigator，如下所示

StackNavigator(
  {
    Tabs: {
      screen: TabNavigator(
        {
          TabA: {
            screen: TabA,
            navigationOptions: {
              tabBarIcon: <MaterialCommunityIcons name={"account"} />
            }
          },
          TabB: {
            screen: TabB,
            navigationOptions: {
              tabBarIcon: <MaterialCommunityIcons name={"message"} />
            }
          },
          TabC: {
            screen: TabC,
            navigationOptions: {
              tabBarIcon: <MaterialCommunityIcons name={"earth"} />
            }
          }
        },
        {
          tabBarOptions: {
            showLabel: false,
            showIcon: true,
            style: {
              backgroundColor: "white"
            }
          }
        }
      ),
      navigationOptions: {
        title: "Notifications"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerRight: <MaterialCommunityIcons name={"magnify"} size={30} style={{ color: "white" }} />,
      headerStyle: {
        backgroundColor: "rgb(76, 62, 84)"
      },
      headerTitleStyle: { color: "white" }
    })
  }
)