は、次のように私はスタック・ナビゲーターを実装しているAndroidの

Question

ためのナビゲーションスタックナビゲーター戻るボタンのスタイリングを反応します。しかし、私は、次のnavigationOptions使用AddNoteScreenのための私のヘッダーをスタイリングしました：

static navigationOptions =() => ({ 
    title: 'Add a note', 
    headerStyle: { 
     height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54, 
     backgroundColor: '#2196F3' 
    }, 
    headerTitleStyle: { 
     marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0, 
     color: 'white' 
    } 
}) 

今すぐheaderTitleStyleは、Android上の戻る矢印は影響を与えません。アンドロイドのバック矢印をheaderTitleStyleと同じスタイルにするにはどうすればよいですか？

Answer 1

バックボタンアイコンの色を変更するために使用することができるnavigationOptionsにおけるプロパティheaderTintColorあり：

これは現在の問題の画像です。現在のところ、他のオプションはありません反応ナビゲーションv1.0.0-beta.11戻るボタンをカスタマイズします。ところで代わりにヘッダーのスタイルでステータスバーの高さを扱う

static navigationOptions =() => ({ 
    title: 'Add a note', 
    headerStyle: { 
     height: Platform.OS === 'android' ? 54 + STATUS_BAR_HEIGHT : 54, 
     backgroundColor: '#2196F3' 
    }, 
    headerTitleStyle: { 
     marginTop: Platform.OS === 'android' ? STATUS_BAR_HEIGHT : 0, 
     color: 'white' 
    }, 
    headerTintColor: 'white' 
}) 

は、ちょうどその後この「AppWithStatusBar」コンポーネントをレンダリング

import { 
    AppRegistry, 
    View, 
    StatusBar, 
} from 'react-native'; 

class AppWithStatusBar extends Component { 

    render() { 
    return(
     <View style={{flex: 1}}> 
     <StatusBar barStyle="light-content"/> 
     <MainNav /> 
     </View> 
    ); 
    } 
} 

のようなあなたのルートコンポーネント内部の反応ネイティブのステータスバーコンポーネントをレンダリング

AppRegistry.registerComponent('your_app',() => AppWithStatusBar);