如何设置react-native-router-flux的样式？

Question

我正在使用react-native-router-flux 4.0.0-beta.17作为我的学习项目.我需要自定义标题.例如背景颜色,标题对齐等.我找不到关于它的好文档.其中一个有类似的东西

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

但它没有做任何事情.

请给我一些关于好文档的参考,如果可能的话,请给我一些关于如何设置路由器样式的信息.我在哪里可以找到一份全面的文件？

Answer 1

该sceneStyle道具是用来样式所有RNRF场景/屏幕,这是你的屏幕的内容部分(以下标头的)的.如果要为所有RNRF场景标题提供自定义样式,则必须navigationBarStyle在RNRF路由器组件中使用props.

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

下面是我使用它的快照示例之一.

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

Answer 2

也许您可以遵循此参考，这可能是您的问题，因为放置样式是不正确的，因为如果您想更改标题背景颜色，您可以使用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 3

您可以通过使用hideNavBar={true}并使用自己的标头组件来隐藏默认标头,以获得完全可自定义的标头.通过这种方式,您可以使用UI组件包的标头组件,如native-base.