使用react-navigation的React-native：屏幕上不显示标题

Question

我确实有一个简单的React-native应用程序，使用react-navigation进行导航。我的问题是，即使在以下屏幕之一中，标题和标题也未显示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。

您必须考虑和计划应用程序的导航流程。

React Navigation文档的“抽屉”部分有所欠缺，但是您可以使用“标签”部分中所述的相同原理

每个选项卡的堆栈导航器

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

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