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

Question

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

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

但它什么也没做。

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

Answer 1

也许你可以按照这个 reference，这可能是你的问题，因为放置样式不正确，因为如果你想更改 header 背景颜色，你可以使用 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 2

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

Answer 3

sceneStyle 道具用于设置所有 RNRF scene/screen 的样式，这是屏幕的内容部分（header 下方）。如果您想为所有 RNRF 场景提供自定义样式 header，您必须在 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 4

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

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

这将给出如下结果：

您可以在 Router 中使用 navigationBarStyle 道具，正如@wlisrausr 上面提到的那样

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

这将给出结果：

Answer 5

更改 Header 栏文本样式的简单方法：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,
  }}
/>

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

how to style react-native-router-flux?

react-native

react-native-router-flux