React-native с реакции-навигацией: заголовок не отображается на экране

Question

У меня есть простое приложение React-native, использующее реагирующую навигацию для навигации.Моя проблема в том, что для одного из экранов заголовок и заголовок не отображаются, даже если он установлен в navigationOptions:

main.js:

import React from "react";
import { View, Text } from "react-native";
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";

import ArticleList from "./screens/ArticleList";
import ArticleList2 from "./screens/ArticeList2";

import ArticleWebView from "./screens/ArticleWebView";

// create the Navigator to be used
const Stack = createStackNavigator({
  ArticleList: { screen: ArticleList },
  ArticleWebView: { screen: ArticleWebView }
});

const Drawer = createDrawerNavigator(
  {
    Stack: { screen: Stack },
    ArticleList2: { screen: ArticleList2 }
  },
  {
    initialRouteName: "Stack"
  }
);

// The container for the navigator
const AppContainer = createAppContainer(Drawer);

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

export default App;

ArticleList2 являетсяочень простой компонент:

import React from "react";
import { View, Text } from "react-native";

import ArticleListComponent from "../components/ArticleListComponent";

class ArticleList2 extends React.Component {
  static navigationOptions = {
  title: 'Link2'
  };

  render() {
    return (
      <View>
        <Text>LIst2</Text>
      </View>
    );
  }
}

export default ArticleList2;

Однако заголовок и заголовок в приложении не отображаются.Кто-нибудь может помочь, пожалуйста?

Answer 1

DrawerNavigator не включает в себя заголовок. Чтобы создать заголовок внутри ArticleList2, вам нужно будет создать новый StackNavigator для компонента.

Вы должны продумать и спланировать навигацию вашего приложения.

Раздел Drawer документации React Navigation немного отсутствует, но вы можете использовать тот же принцип, который описан в разделе Tab

Навигатор стека для каждой вкладки

const ArticleList2Stack = createStackNavigator({
  ArticleList2: { screen: ArticleList2 }
});

const Drawer = createDrawerNavigator(
 {
   Stack: { screen: Stack },
   ArticleList2: { screen: ArticleList2Stack }
 },
 {
   initialRouteName: "Stack"
 }
);