réagit natif, montre une barre ci-dessus de TabNavigator, qui se cachent sur le défilement (comme facebook app faire)

Question

Je suis en train de dévolter une application avec réagissez natif.

J'utilise tabNavigator et StackNavigator de react-navigation pour naviguer entre les onglets.

Maintenant, je veux créer, exactement comme l'application de facebook, un onglet affiché au-dessus de mon tabNavigator. Ces onglets cachent défiler vers le bas.

Le composant FlatList dispose de l'option ListHeaderComponent pour rendre son en-tête qui se cache également lors du défilement vers le bas.

Une idée? Je ne trouvais rien sur https://reactnavigation.org/docs/ ou docs réagissez-natif

Answer 1

On dirait un TabNavigator niché dans un StackNavigator, comme ci-dessous

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" } 
    }) 
    } 
)