web-dev-qa-db-ja.com

Reactナビゲーションの背景色の切り替えとStackNavigatorのスタイル設定

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

または、より良い質問かもしれません：ヘッダーと背景色をReact NavigationのStackNavigatorでどのようにスタイルしますか？

javascriptreactjsreact-nativenavigationnavigator
17
Turnipdabeets

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

UPDATE !! 2017年5月beta9では、navigationOptionsはflatになりました

重大な変更についてはこちらをご覧ください

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

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

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

/*
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 ( 
        <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'
   }
});
21
njlaboratory

以下のコードを使用して、カスタムナビゲーションヘッダーを作成します

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

このコードを試してください。

 static navigationOptions = {
        title: 'KindleJoy - Kids Learning Center',
        headerTintColor: '#ffffff',
        /*headerBackground: (
            <Image
                style={StyleSheet.absoluteFill}
                source={require('./imgs/yr_logo.png')}
            />
        ),*/
        headerStyle: {
            backgroundColor: '#1d7110',
            borderBottomColor: 'black',
            borderBottomWidth: 0,
        },
        headerTitleStyle: {
            fontSize: 18,
        }
    };
0
Yogesh Rathi