web-dev-qa-db-fra.com

Existe-t-il un «en-tête fixe» ou un «en-tête collant» pour réagir natif?

Existe-t-il un moyen d'avoir une barre de titre supérieure fixe et permanente (je pense que cela s'appelle en-tête?) Pour réagir en natif?

Presque comme une barre d'état, elle est toujours là. Mais il doit être au sommet (avant même que l'en-tête de la navigation de réaction)

Mon plan était de mettre une entrée de recherche globale là-bas, donc n'importe où dans l'application, vous pouvez rechercher (Rechercher du contenu non affecté par l'écran présenté pour le moment. Une recherche globale pure toujours disponible.)

Y a-t-il un moyen de faire cela? Je travaille actuellement avec expo et react-navigation.

--- Éditer

J'ajoute la capture d'écran du filaire qui montre ce que je voulais dire. Vous remarquerez que la barre de recherche reste en haut quel que soit l'écran sur lequel vous vous trouvez. C'est une barre de recherche globale.

-- Éditer

Je pense que je dois le dire clairement. J'essaie de le faire avec ReactNavigation . Je pense que je dois jouer avec 'createAppContainer', ou toute fonction de création de navigateur comme 'createDrawerNavigator' et trouver un moyen de mettre l'en-tête fixe avec les écrans de navigation.

Example Navigation with Searchbar

javascriptreact-nativereact-navigationexpo
3
Andre Song

J'ai trouvé le chemin moi-même. =)

La clé était donc de présenter le navigateur personnalisé.

Le Navigateur personnalisé peut étendre mon Navigateur d'onglets existant, et la partie de rendu peut retourner presque tout ce que je veux PLUS la vue régulière que mon TabNavigator aura.

Mon application dispose d'un tiroir et d'un navigateur d'onglets. Donc, dans mon cas, Drawer Navigator a un tas d'itinéraires et l'un des itinéraires est le navigateur personnalisé qui étend TabNavigator.

Voici mon code:

const MyTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTabStack,
  ThirdTabStack,
  FourthTabStack,
});

class CustomNavigator extends React.Component {
  static router = MyTab.router;
  render() {
    const { navigation } = this.props;

    return (
      {/* This SafeAreaView is from ReactNavigation. 
          forceInset-bottom-never is needed because  the 
          TabNavigator is already Safe-area-ing the bottom. 
          You don't want to do it again.*/}
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        {/* SearchHeader is zIndex: 1(or elevation: 1) for the absolute 
            positioned stuff that appears and cover the 
            screen after focusing on Input. */}
        <SearchHeader/>
        <MyTab navigation={navigation} />
      </SafeAreaView>
    );
  }
}


export default createDrawerNavigator({
  CustomNavigator,
  SettingsScreen,
  LegalScreen,
  FeedbackScreen,
  VersionScreen,
}, {
  drawerType: 'slide',
  drawerWidth: 260,
});

PS. Si vous voulez avoir une vue superposée de position absolue sur laquelle le TabNavigator est rendu, assurez-vous d'utiliser zIndex pour iOS et élévation pour Android !! Dans mon cas, le composant SearchHeader a:

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        zIndex: 1,
      },
      Android: {
        elevation: 1
      },
    }),
  },
  {...}
})
0
Andre Song

Le composant natif de react FlastList a une propriété ListHeaderComponent pour rendre un en-tête et une autre pour le coller stickyHeaderIndices. C'est exactement ce dont vous avez besoin.

Dans le ListHeaderComponent vous rendrez votre champ de recherche et avec stickyHeaderIndices={[0]} le définira comme un en-tête collant:

<FlatList
    data={ this.state.data }
    renderItem={({item}) =>  this.renderItem(item)}
    ListHeaderComponent={this.renderHeader}
    stickyHeaderIndices={[0]}
/>

Découvrez le fonctionnement exemple .

3
Hristo Eftimov

Vous devez créer un composant avec position: 'absolute' attribut de style (et un ensemble minHeight - la hauteur souhaitée pour votre barre de recherche). Ensuite, vous pouvez l'importer dans votre composant de niveau racine et mettre un marginTop: ... attribut de style sur le reste du contenu de votre application (conteneur de page) égal au minHeight que vous avez défini pour votre en-tête/barre de recherche.

De cette façon, l'en-tête s'affichera sur toutes les pages et le reste du contenu de votre application ne s'affichera pas derrière l'en-tête.

Vous pouvez en trouver un exemple de base ici

0
Jono