web-dev-qa-db-ja.com

React Native、change React Navigation header styling

私は React Navigation をReactネイティブアプリで実装しています。ヘッダーの背景色と前景色を変更したいのです。

/**
 * 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のドキュメントも参照しましたが、スタイリングの設定方法を示す場所が見つかりません。

javascriptreactjsreact-nativereact-navigation
15
user818700

React= Navigationの新しいバージョンでは、以下のようなフラットな設定オブジェクトがあります。

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

廃止された回答：

ドキュメント、 here に従って、navigationOptionsオブジェクトを変更します。次のようなものを試してください：

static navigationOptions = {
    title: 'Welcome',
    header: {
        style: {{ backgroundColor: 'red' }},
        titleStyle: {{ color: 'green' }},
    }
}

ただし、実際にはこれらの色を使用しないでください！

28
cssko

ドキュメントによると、このような「navigationOptions」スタイルを使用できます。

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

NavigationOptionsの詳細については、ドキュメントからも読むことができます。

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

14
Vishal Dhaduk

通知！ navigationOptionsはStack NavigationおよびDrawer Navigation
スタックナビゲーションの解決。
ただし、引き出しナビゲーションの場合、contentComponent Configを使用して独自のヘッダーを追加し、スタイルを作成できます。
最初 import { DrawerItems, DrawerNavigation } from 'react-navigation'その後

DrawerItems：の前のヘッダー

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>。

Header Before DrawerItems

DrawerItemsの後のフッター：

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>。

2
Sedric Heidarizarei

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

static navigationOptions = {
    headerTitle: 'SignIn',
    headerTintColor: '#F44336'
};

幸運を！

1
Daniel Agus Sidabutar

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

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