React 네이티브, React Navigation 헤더 스타일 변경

Question

내 React 네이티브 앱에 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에 대한 문서를 살펴 봤지만 스타일을 설정하는 방법을 찾을 수는 없다. 어떤 도움이 필요합니까? 당신이 navigationOptions 개체를 수정, 워드 프로세서 당

, here :

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

되지 않는 답 : 새 버전에서

Answer 1

은 아래처럼 설정 개체 평평한을 탐색 반응. 다음과 같이 시도하십시오.

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, 
     }, 
    };