如何设置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场景标题提供自定义样式，则必须在RNRF路由器组件中使用navigationBarStyle个道具。

<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

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

Answer 3

也许您可以关注此reference，这可能是您的问题，因为放置样式是不对的，因为如果您想更改标题背景颜色，可以使用navigationBarStyle而不是{{1}像这样：

sceneStyle

我希望这个参考可以帮助你。

Answer 4

Router中的sceneStyle属性是一种应用于所有场景的样式，这是完全可选的。

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

这将给出如下结果：

您可以使用@wlisrausr在上文提到的路由器中使用navigationBarStyle道具

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

这将给出结果：

Answer 5

通过以下方式轻松更改标题栏文本样式的方法：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,
  }}
/>