javascript - 如何在功能组件 React Native 中删除 Header

Question

我正在仅使用功能组件在 react-native 中设置导航。如何删除屏幕上的标题？

const AppScreen = ({ navigation }) => {

  //Desc => removing header
  AppScreen.navigationOptions = {
    header: null
  };

  return (
    <>
      <Text>LoGinScreen</Text>
    </>
  );
};

没有显示错误消息，但应用程序使用 header 呈现。

Answer 1

通常希望在多个屏幕上以类似的方式配置 headers。

class AppScreen extends React.Component {
  static navigationOptions = {
    header: null,
    /* No more header config here! */
  };

  /* render function, etc */
}

/* other code... */

您可以将配置移动到属性defaultNavigationOptions 下的堆栈导航器。

---

headerMode 指定标题应如何呈现:

• float - 呈现单个标题，它保持在顶部并作为动画显示屏幕被改变。这是 iOS 上的常见模式。
• screen - 每个屏幕都有一个标题附加到它并且标题淡出与屏幕一起进出。这是一个常见的模式安卓系统。
• none - 不会呈现标题。

---

const RootStack = createStackNavigator(
  {
    Apps: AppScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Apps',
    headerMode: 'none'
    /* if use header The header config from Apps is now here */
  }
);