webentwicklung-frage-antwort-db.com.de

wie man reaktiver-Router-Fluss gestaltet?

Ich verwende für mein Lernprojekt Reaktiver-Router-Flux 4.0.0-beta.17. Ich muss den Header anpassen. Zum Beispiel die Hintergrundfarbe, die Titelausrichtung usw. Ich konnte kein gutes Dokument darüber finden. Einer von ihnen hatte so etwas 

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

aber es tut nichts.

Bitte geben Sie mir Hinweise zu guten Dokumenten und, wenn möglich, Informationen zum Anpassen des Routers. Wo finde ich ein umfassendes Dokument?

6
farmcommand2

Die sceneStyle-Requisiten werden verwendet, um alle Ihre RNRF-Szenen/Bildschirme zu gestalten. Dies ist der Inhaltsteil Ihres Bildschirms (unterhalb der Kopfzeile). Wenn Sie Ihren gesamten RNRF-Szenenheader mit dem benutzerdefinierten Stil versehen möchten, müssen Sie navigationBarStyle-Requisiten in Ihrer RNRF-Routerkomponente verwenden.

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

Unten ist eines der Snapshot-Beispiele, wenn ich es benutze.

 enter image description here

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

12
wlisrausr

Sie können den Standardheader mit hideNavBar={true} ausblenden und Ihre eigene Headerkomponente verwenden, um einen vollständig anpassbaren Header zu erhalten. Auf diese Weise können Sie die Header-Komponente eines UI-Komponentenpakets wie native-base verwenden.

6
Vahid Boreiri

Möglicherweise können Sie dieser Referenz folgen. Möglicherweise liegt Ihr Problem darin, dass es nicht richtig ist, den Stil zu setzen. Wenn Sie die Hintergrundfarbe des Headers ändern möchten, können Sie navigationBarStyle nicht wie sceneStyle verwenden.

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

Ich hoffe, diese Referenz kann Ihnen helfen.

Einfache Möglichkeit, den Textstil der Kopfzeile zu ändern, in: react-native-router-flux

<Scene key="myJobs"
  title={'My Listings'}
  iconName="myJobs"
  hideNavBar={false}
  component={MyJobs}
  titleStyle={{
    color: '#ffffff',
    fontSize: 22,
    fontFamily: FontFamilyBold,
    fontWeight: '700',
    justifyContent: 'center',
    marginLeft: 30,
  }}
/>
0
ANKIT-DETROJA

sceneStyle prop in Router ist ein Stil, der auf alle Szenen angewendet wird. Dies ist völlig optional.

<Router sceneStyle={{ backgroundColor: '#81b71a' }}>
  <Stack key="root">
    <Scene key='sample page' component={Sample} title='Sample Page'/>
  </Stack>
</Router>

Dies ergibt folgendes Ergebnis:

enter image description here

sie können NavigationBarStyle-Requisiten in Router verwenden, wie oben von @wlisrausr erwähnt

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
      <Stack key="root">
        <Scene key='sample page' component={Sample} title='Sample Page'/>
      </Stack>
    </Router>

was ergibt:

navigationBarStyle

0
Darpan Rangari