带有反应导航的本机:标题未显示在屏幕中

Question

我确实有一个简单的 React-native 应用程序，使用 react-navigation 进行导航。我的问题是，对于其中一个屏幕，标题和标题没有显示，即使它是在navigationOptions中设置的：

主.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 导航文档的抽屉部分有点缺失，但您可以使用与 Tab 部分中描述的相同的原理

每个选项卡的堆栈导航器

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