React Navigation背景の色とスタイルを切り替えるStackNavigator

Question

React Nativeにはかなり新しいですが、私は3つのシーンで簡単な作業アプリを持っています。以前Navigatorを使用していましたが、遅く感じられ、React Navigation（https://reactnavigation.org/のように）を試してみることに興奮しました。リアクションナビゲーションを実装した後、私の背景色は白から灰色に変わり、灰色から白に変わった。これは奇妙なことであり、関連するべきではありません。しかし私は自分のスタイルを変えなかった。私は新しいナビゲーションのみを実装し、色は変更されました。私がNavigatorに戻ったとき、私の色が戻る。私はStackNavigatorを使用しています。他の誰かがこの奇妙な現象に遭遇しましたか？

React NavigationのStackNavigatorでヘッダーと背景色をどのようにスタイルするのですか？ナビゲーションを反応させるのにヘッダをスタイルに

Answer 1

がnavigationOptionsオブジェクト内のヘッダーオブジェクトを使用します。backgroundColorをスタイリング

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を設定する必要がありそうでない場合は、デフォルトの色を取得します。

UPDATE !! 2017年5月beta9のとおりnavigationOptionsは今

平坦であり、あなたがここに互換性に影響する変更について読むことができます。https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9

あなたはヘッダオブジェクトからオブジェクトキーを削除する必要があります。また、名前が変更されていることに注意してください。

static navigationOptions = { 
    title: 'some string title', 
    headerTitleStyle: { 
     /* */ 
    }, 
    headerStyle: { 
     /* */ 
    }, 
    headerTintColor: { 
     /* */ 
    }, 
} 

Answer 2

ここでは、カードの背景色とヘッダーの背景とフォントの色を変更するために使用している例を示します。

/* 
 
1. Change React Navigation background color. 
 
- change the style backgroundColor property in the StackNavigator component 
 
- also add a cardStyle object to the Visual options config specifying a background color 
 
*/ 
 

 
//your new background color 
 
let myNewBackgroundColor = 'teal'; 
 

 
const AppNavigator = StackNavigator({ 
 
    SomeLoginScreen: { 
 
    screen: SomeLoginScreen 
 
    } 
 
}, { 
 
     headerMode: 'screen', 
 
     cardStyle: {backgroundColor: myNewBackgroundColor 
 
    } 
 
}); 
 

 
//add the new color to the style property 
 
class App extends React.Component { 
 
    render() { 
 
    return ( 
 
    \t <AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/> 
 
    ); 
 
    } 
 
} 
 

 
/* 
 
2. Change React Navigation Header background color and text color. 
 
- change the StackNavigator navigationOptions 
 
*/ 
 

 
/* 
 
its not clear in the docs but the tintColor 
 
changes the color of the text title in the 
 
header while a new style object changes the 
 
background color. 
 
*/ 
 

 

 
//your new text color 
 
let myNewTextColor = 'forestgreen'; 
 

 
//your new header background color 
 
let myNewHeaderBackgroundColor = 'pink'; 
 

 
const AppNavigator = StackNavigator({ 
 
    SomeLoginScreen: { 
 
    screen: SomeLoginScreen, 
 
    navigationOptions: { 
 
     title: 'Register', 
 
     header: { 
 
     tintColor: myNewTextColor, 
 
     style: { 
 
      backgroundColor: myNewHeaderBackgroundColor 
 
     } 
 
     }, 
 
    } 
 
    } 
 
}, { 
 
    headerMode: 'screen', 
 
    cardStyle:{backgroundColor:'red' 
 
    } 
 
});

Answer 3

カスタムナビゲーションヘッダー

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

を作成するためのコード下記の使用