React Native，更改React導航標題樣式

Question

我在我的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的文檔，但是我無法找到它在哪裏顯示如何設置樣式。任何幫助？

Answer 1

在新版本陣營導航你有一個平坦的設置對象，象下面這樣：

static navigationOptions = { 
    title: 'Chat', 
    headerStyle: { backgroundColor: 'red' }, 
    headerTitleStyle: { color: 'green' }, 
} 

過時的答案：

％的文檔，here，修改navigationOptions對象。嘗試像這樣：

static navigationOptions = { 
    title: 'Welcome', 
    header: { 
     style: {{ backgroundColor: 'red' }}, 
     titleStyle: {{ color: 'green' }}, 
    } 
} 

請不要實際上最終使用這些顏色！

Answer 2

根據文檔，你可以使用像這樣的「navigationOptions」風格。

static navigationOptions = { 
title: 'Chat', 
headerStyle:{ backgroundColor: '#FFF'}, 
headerTitleStyle:{ color: 'green'}, 
} 

有關navigationOptions更多信息，你也可以從文檔閱讀： -

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

Answer 3

試試這個代碼：

static navigationOptions = { 
    headerTitle: 'SignIn', 
    headerTintColor: '#F44336' 
    }; 

好運！

Answer 4

注意！ navigationOptions是Stack Navigation和Drawer Navigation之間的差異
堆棧導航已解決。
但對於抽屜導航您可以用contentComponent配置添加自己的頭，讓你的風格：
首先import { DrawerItems, DrawerNavigation } from 'react-navigation'然後

頭之前DrawerItems：

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>。

頁腳DrawerItems後：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>。

Answer 5

試試這個工作代碼

static navigationOptions = { 
     title: 'Home', 
     headerTintColor: '#ffffff', 
     headerStyle: { 
     backgroundColor: '#2F95D6', 
     borderBottomColor: '#ffffff', 
     borderBottomWidth: 3, 
     }, 
     headerTitleStyle: { 
     fontSize: 18, 
     }, 
    };