我正在我的React Native应用程序中实现React Navigation,并且想要更改标题的背景和前景色。我有以下几点:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; export default class ReactNativePlayground extends Component { static navigationOptions = { title: 'Welcome', }; render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); const SimpleApp = StackNavigator({ Home: { screen: ReactNativePlayground } }); AppRegistry.registerComponent('ReactNativePlayground', () => SimpleApp);
默认情况下,标题的背景颜色为白色,前景为黑色。我也看过了React Navigation的文档,但是找不到在哪里显示如何设置样式。有什么帮助吗?
在更新版本的React Navigation中,您有一个更扁平的设置对象,如下所示:
static navigationOptions = { title: 'Chat', headerStyle: { backgroundColor: 'red' }, headerTitleStyle: { color: 'green' }, }
不建议使用的答案:
根据文档,在这里,您可以修改navigationOptions对象。尝试类似:
static navigationOptions = { title: 'Welcome', header: { style: {{ backgroundColor: 'red' }}, titleStyle: {{ color: 'green' }}, } }
请不要实际使用这些颜色!