How to style react-native-router-stream?

Question

I am using response-native-router-flux 4.0.0-beta.17 for my training project. I need to customize the header. e.g. background color, title alignment, etc. I could not find a good document about this. One of them had something like

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

but he does nothing.

Please give me a link to good documents and, if possible, some information about the style of the router. Where can I find a comprehensive document?

Answer 1

sceneStyle / RNRF, ( ). RNRF, navigationBarStyle RNRF Router.

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

, .

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

Answer 2

hideNavBar={true} , . , , native-base.

Answer 3

, . , , , navigationBarStyle, sceneStyle, :

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

, .

Answer 4

sceneStyle prop Router - , , .

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

:

navigationBarStyle Router, @wlisrausr

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

:

Answer 5

: Reaction-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,
  }}
/>

Hide result