Question

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

const AppScreen = ({ navigation }) => {

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

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

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

Answer 1

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

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

通过使用功能组件的这一侧。

AppScreen.navigationOptions = {
header: null
};

Answer 2

在路由配置中设置defaultNavigationOptions：

Answer 3

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

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

  /* render function, etc */
}

/* other code... */

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

headerMode 指定标题的呈现方式：

float-呈现一个停留在顶部并以屏幕已更改。这是iOS上的常见模式。
屏幕-每个屏幕都有一个附加的标题，标题消失与屏幕一起进出。这是一种常见的模式 Android。
无-将不显示标题。

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

Answer 4

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

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

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

4 个答案: