Заголовки заголовков не отображаются при использовании модального?

Question

Я хочу создать приложение, которое открывает модальное окно при нажатии на значок определенной панели вкладок и в противном случае перемещается на другие вкладки. В основном я достиг желаемого эффекта, но не могу отобразить заголовки заголовков на немодальных экранах.

Я пытался возиться с навигационными параметрами, stackNavigatorConfig и т.п., но, похоже, ничего не работает.

Вот закуска, содержащая мой текущий код: https://snack.expo.io/@jonathanchaffer/modal_test

Для справки, вот мой App.js (без импорта):

const TabNavigator = createBottomTabNavigator(
  {
    HomeTab: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-home" : "md-home"}
          />
        )
      }
    },
    AddTab: {
      screen: () => <View />, // FIXME: Holding down the Add button causes it to navigate to an empty screen.
      navigationOptions: {
        title: "Add",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-add-circle" : "md-add-circle"}
          />
        )
      }
    },
    SettingsTab: {
      screen: SettingsScreen,
      navigationOptions: {
        title: "Settings",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-settings" : "md-settings"}
          />
        )
      }
    }
  },

  {
    initialRouteName: "HomeTab",
    defaultNavigationOptions: {
      tabBarButtonComponent: TouchableOpacity,
      tabBarOnPress: data => {
        const { navigation, defaultHandler } = data;
        if (navigation.state.key === "AddTab") {
          navigation.navigate("ModalScreen");
        } else {
          defaultHandler(navigation.state.key);
        }
      }
    }
  }
);

const MainNavigator = createStackNavigator(
  {
    Tabs: {
      screen: TabNavigator
    },
    ModalScreen: {
      screen: AddScreen
    }
  },
  {
    initialRouteName: "Tabs",
    mode: "modal"
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Я ожидаю, что заголовок заголовка будет отображаться для всех трех вкладок: «Домой», «Добавить» и «Настройки», но в настоящее время он отображается только для модального окна «Добавить».

Любые советы или предложения будут с благодарностью. Спасибо!

Answer 1

Проблема здесь в том, что вы включаете Главный экран и Экран настроек в навигатор нижней вкладки, поэтому, когда вы определяете заголовок для них, он дает заголовок только нижнему меню. Что вы должны сделать, это создать стековый навигатор для домашнего экрана и экранов настроек с их заголовком, а затем включить эти стековые навигаторы внутри нижнего навигатора.

const HomeNavigator = createStackNavigator({
    HomeScreen: { screen: HomeScreen,
      title:"Home Screen"
  }
}
);

const SettingsNavigator = createStackNavigator({
    SettingsScreen: { screen: SettingsScreen,
      title:"Settings Screen"
  }
}
);

Тогда вы должны сделать это в нижнем навигаторе:

HomeTab: {
      screen: HomeNavigator,
   ...
SettingsTab: {
  screen: SettingsNavigator,
   ...

Наконец, вы должны скрыть заголовок навигатора основного стека для нижней вкладки, так как в противном случае будет два заголовка для домашнего экрана и экрана настроек

Tabs: {
      screen: TabNavigator,
      navigationOptions:({navigation}) => ({
      header: null,
      })
    }

Я попробовал это в твоей выставочной закуске, и это работает. Надеюсь, это поможет вам.