反应原生，显示TabNavigator上方的栏，谁隐藏在滚动（如Facebook应用程序做的）

问题描述：

我devolopping与原生反应的应用程序。反应原生，显示TabNavigator上方的栏，谁隐藏在滚动（如Facebook应用程序做的）

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

现在我想创建，就像Facebook的应用程序一样，显示在我的tabNavigator上方的选项卡。该标签隐藏在向下滚动。

FlatList组件有ListHeaderComponent选项用于呈现他的头向下滚动时也隐藏的头。

有什么想法？我没有发现任何关于https://reactnavigation.org/docs/或反应本地文档

@Alainlb：有你找到解决方案？我也在为此而苦苦挣扎。当我使用单个组件时，我可以滚动顶部栏。现在我正在使用TabbarNavigator。我没有得到如何实现这一点。你有任何样品。 – Sujit

@Sujit。不，我没有发现这篇文章创建的任何内容。：如果你找到了，请告诉我。 – AlainIb

答

看起来像嵌套在一个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" } 
    }) 
    } 
)

谢谢，但你确定吗？我已经使用stackNavigator，一个StackNavigator在所有手机屏幕上打开一个全屏模式。我想只显示一个像红色长方形的条形图 – AlainIb

检查编辑。对我来说工作得很好。只是嘲笑它，并添加了屏幕截图 – wizloc

是的，谢谢它显示。向下滚动时，你知道如何隐藏它吗？ – AlainIb

反应原生，显示TabNavigator上方的栏，谁隐藏在滚动（如Facebook应用程序做的）

相关推荐