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

Question

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

const AppScreen = ({ navigation }) => {

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

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

未显示错误消息，但应用程序呈现标题。

Answer 1

在多个屏幕上以类似的方式配置headers是很常见的。

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

  /* render function, etc */
}

/* other code... */

您可以将配置移至 Properties defaultNavigationOptions下的堆栈导航器。

---

headerMode指定应如何呈现标题：

• float - 渲染一个位于顶部的标题，并随着屏幕的变化进行动画处理。 这是 iOS 上的常见模式。
• screen - 每个屏幕都有一个标题，标题与屏幕一起淡入淡出。 这是 Android 上的常见模式。
• none - 不会呈现标题。

---

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

Answer 2

您可以从功能组件中删除标题

 const AppScreen = ({ navigation }) => {
 return (
   <Text>LoginScreen</Text>
 );
};

通过在功能组件之外使用它。

AppScreen.navigationOptions = {
header: null
};

Answer 3

要删除功能组件屏幕上的标题，请在路由配置中执行以下操作：

const AuthStack = createStackNavigator(
  {
    Login: AuthScreen
  },
  {
      headerMode: 'none'   //this will remove the header from the screen of AuthScreen
  })

Answer 4

在你的路由配置中设置 defaultNavigationOptions：

createStackNavigator({
                screenName:
                    { screen: screenName },                            
                },
                {defaultStackNavigationOptions:{
                    header: () => null   //this in the screen where you want to hide the header
                       }
                    }
                )