web-dev-qa-db-fra.com

comment styler react-native-router-flux?

J'utilise react-native-router-flux 4.0.0-beta.17 pour mon projet d'apprentissage. J'ai besoin de personnaliser l'en-tête. par exemple, la couleur de fond, l'alignement du titre, etc. Je n'ai pas pu trouver un bon document à ce sujet. L'un d'entre eux avait quelque chose comme 

 <Router sceneStyle={{backgroundColor: '#81b71a'}}>
     <Scene key="root">
        <Scene key='login' component={LoginForm} title='Please Login :)' />
     </Scene>
 </Router>

mais ça ne fait rien.

S'il vous plaît, donnez-moi des références sur la bonne documentation et, si possible, des informations sur la manière de styler le routeur. Où puis-je trouver un document complet?

react-nativereact-native-router-flux
6
farmcommand2

Les accessoires sceneStyle permettent de styler l’ensemble de votre scène/écran RNRF, qui correspond au contenu de votre écran (au-dessous de l’en-tête). Si vous souhaitez attribuer le style personnalisé à tous les en-têtes de votre scène RNRF, vous devez utiliser les accessoires navigationBarStyle dans votre composant Routeur RNRF.

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
  <Scene key="root">
    <Scene key='login' component={LoginForm} title='Please Login :)' />
  </Scene>
</Router>

Vous trouverez ci-dessous un exemple de capture instantanée si je l’utilise.

 enter image description here

Réf.: https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

12
wlisrausr

Vous pouvez masquer l'en-tête par défaut à l'aide de hideNavBar={true} et utiliser votre propre composant d'en-tête pour créer un en-tête entièrement personnalisable. De cette façon, vous pouvez utiliser le composant d’en-tête d’un package de composants d’interface utilisateur tel que native-base .

6
Vahid Boreiri

Peut-être que vous pouvez suivre cette référence , Cela peut être votre problème car il n’est pas correct de mettre le style car si vous voulez changer la couleur d’arrière-plan de l’en-tête, vous pouvez utiliser navigationBarStyle sans utiliser sceneStyle comme ceci:

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
  <Schema .../>
  <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

J'espère que cette référence peut vous aider.

2
Syauqi Rahmat Sugara