react navigation書き方について

Question

ご質問失礼いたします。
以下のcreateStackNavigatorの第二引数にnavigationOptionsを設定しても表示がされないのですが、書き方がおかしいのでしょうか。

import { createAppContainer, createStackNavigator } from 'react-navigation';
import MemoListScreen from './src/screens/MemoListScreen';
import MemoDetailScreen from './src/screens/MemoDetailScreen';

const App = createStackNavigator({
  Home: { screen: MemoListScreen },
  MemoDetailScreen: { screen: MemoDetailScreen },
}, {
  navigationOptions: {
    headerTitle: 'Memot',
    headerStyle: {
      backgroundColor: '#265366',
    },
    headerTitleStyle: {
      color: '#fff',
    },
  },
});

export default createAppContainer(App);

Answer 1

こんにちは

以下のように、navigationOptions を defaultNavigationOptions に修正すればよいかと思います。

修正前：

navigationOptions: {
    headerTitle: 'Memot',
    headerStyle: {
// ・・・ 以下略

修正後：

defaultNavigationOptions: {
    headerTitle: 'Memot',
    headerStyle: {
// ・・・ 以下略

以下は、私のローカルで、上記の修正後、 スクリーン名を表示するだけの MemoListScreen と MemoDetailScreen を追加してアプリの初期画面を表示させたところです。

複数のスクリーンでヘッダの設定を共有する方法については、以下が参考になるかと思います。

• Sharing common navigationOptions across screens (React Navigation公式)

以上参考になれば幸いです。

Comments

[masa207]

問題解決いたしました。
ご丁寧にありがとうございました。

[jun68ykt]

どういたしまして。解決されたようで、よかったです ????