私はReact Nativeにかなり慣れていないのですが、3つのシーンを持つシンプルなアプリを持っています。以前はNavigatorを使用していましたが、ラグを感じていたので、React Navigation（https://reactnavigation.org/）。React Navigation を実装した後、背景色が白から灰色に変わり、灰色だったものが白に変わりました。これは奇妙な現象で、関係ないはずです。ただし、スタイルは変更していません。新しいナビゲーションを実装しただけで、色が変わりました。Navigator に戻すと、色が元に戻ります。StackNavigator を使用しています。この奇妙な現象に遭遇した人は他にいますか?
あるいは、もっと良い質問は、「React Navigation の StackNavigator でヘッダーと背景色をどのようにスタイル設定するのか」です。
ベストアンサー1
React Navigation でヘッダーのスタイルを設定するには、navigationOptions オブジェクト内の header オブジェクトを使用します。
static navigationOptions = {
header: {
titleStyle: {
/* this only styles the title/text (font, color etc.) */
},
style: {
/* this will style the header, but does NOT change the text */
},
tintColor: {
/* this will color your back and forward arrows or left and right icons */
}
}
}
のスタイルを設定するにはbackgroundColor、アプリで を設定する必要があります。設定backgroundColorしない場合は、デフォルトの色が使用されます。
更新!! 2017年5月のベータ9では、ナビゲーションオプションはフラットになりました
あなたはできる重大な変更についてはこちらをご覧ください
ヘッダー オブジェクトからオブジェクト キーを削除する必要があります。また、名前が変更されていることにも注意してください。
static navigationOptions = {
title: 'some string title',
headerTitleStyle: {
/* */
},
headerStyle: {
/* */
},
headerTintColor: {
/* */
},
}