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

Question

I'm setting up a navigation in react-native using only functional component. How do i remove the header on the Screen?

const AppScreen = ({ navigation }) => {

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

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

No error message is shown but the app renders with a header.

Answer 1

It is common to want to configure the headers in a similar way on multiple screens.

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

  /* render function, etc */
}

/* other code... */

You can move the configuration to the stack navigator under Properties defaultNavigationOptions .

---

headerMode Specifies how the header should be rendered:

• float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
• screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
• none - No header will be rendered.

---

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

Answer 2

You can remove header from functional component

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

by using this out side of your functional component.

AppScreen.navigationOptions = {
header: null
};

Answer 3

To remove the header on the screen for functional components, in the routes config do the following:

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

Answer 4

Set the defaultNavigationOptions in your routes configs:

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