本机反应，在 TabNavigator 上方显示一个栏，隐藏在滚动条上（就像 facebook 应用程序那样）

Question

我正在使用 React Native 开发一个应用程序。

我使用 react-navigation 中的 tabNavigator 和 StackNavigator 在选项卡之间导航。

现在我想创建一个显示在 tabNavigator 上方的选项卡，就像 facebook 的应用程序一样。此选项卡在向下滚动时隐藏。

FlatList 组件有 ListHeaderComponent 选项来呈现他的 header 向下滚动时也会隐藏。

有什么想法吗？我没有在 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" }
    })
  }
)

本机反应，在 TabNavigator 上方显示一个栏，隐藏在滚动条上（就像 facebook 应用程序那样）

react native, show a bar above of TabNavigator, who hide on scroll ( like facebook app do)

react-native

react-navigation