我在我的学习项目中使用 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>
但它什么也没做。
请给我一些关于好的文档的参考，如果可能的话，请给我一些关于如何设置路由器样式的信息。在哪里可以找到全面的文档？
【问题讨论】：
标签： react-native react-native-router-flux
更改标题栏文本样式的简单方法：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,
}}
/>【讨论】：
Router中的sceneStyle prop是应用于所有场景的样式，完全可选。
<Router sceneStyle={{ backgroundColor: '#81b71a' }}>
<Stack key="root">
<Scene key='sample page' component={Sample} title='Sample Page'/>
</Stack>
</Router>
这将给出如下结果：
你可以使用上面@wlisrausr提到的Router中的navigationBarStyle道具
<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
<Stack key="root">
<Scene key='sample page' component={Sample} title='Sample Page'/>
</Stack>
</Router>
这将给出结果：
【讨论】：
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
【讨论】：
您可以使用hideNavBar={true} 隐藏默认标头，并使用您自己的标头组件来拥有完全可定制的标头。这样就可以使用native-base这样的UI组件包的header组件了。
【讨论】：
也许你可以关注这个reference，这可能是你的问题，因为放置样式是不正确的，因为如果你想更改标题背景颜色，你可以使用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
},
})
我希望这个参考可以帮助你。
【讨论】：