Javascript 在堆栈导航器中隐藏标题反应导航

Hide header in stack navigator React navigation

提问by Avijit Dutta

I'm trying to switch screen using both stack and tab navigator.

我正在尝试使用堆栈和选项卡导航器切换屏幕。

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like::

在这种情况下，首先使用 stacknavigator，然后使用 tabnavigator。我想隐藏堆栈导航器的标题。当我使用导航选项时，它无法正常工作：

navigationOptions: { header: { visible: false } }

i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like::

我正在 stacknavigator 中使用的前两个组件上尝试此代码。如果我使用这一行，则会出现一些错误，例如：

回答by Perry

UPDATE as of version 5

从第 5 版开始更新

As of version 5 it is the option headerShownin screenOptions

截至5版本，它是选择headerShown在screenOptions

Example of usage:

用法示例：

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:

如果您只想在 1 个屏幕上隐藏标题，您可以通过在屏幕组件上设置 screenOptions 来完成此操作，请参见下面的示例：

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

See also the blogabout version 5

另请参阅有关第 5 版的博客

UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown

更新
从 2.0.0-alpha.36 (2019-11-07) 版本开始，
有一个新的 navigationOption：headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Old answer

旧答案

I use this to hide the stack bar (notice this is the value of the second param):

我用它来隐藏堆栈栏（注意这是第二个参数的值）：

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

When you use the this method it will be hidden on all screens.

当您使用此方法时，它将隐藏在所有屏幕上。

In your case it will look like this:

在您的情况下，它将如下所示：

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

回答by Dpkstr

Simply use below code in the page you want to hide the header

只需在要隐藏标题的页面中使用以下代码

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

refer to Stack Navigator

请参阅堆栈导航器

回答by Vaibhav Bacchav

Just add this into your class/component code snippet and Header will be hidden

只需将其添加到您的类/组件代码片段中，Header 将被隐藏

 static navigationOptions = { header: null }

回答by Vaibhav Bacchav

If your screen is a class component

如果你的屏幕是一个类组件

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

code this in your targeted screen as the first method (function).

在您的目标屏幕中将其编码为第一种方法（函数）。

回答by Waqar UlHaq

If you want to hide on specific screen than do like this:

如果你想隐藏在特定屏幕上而不是这样：

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

回答by Cevin Ways

I am using header : nullinstead of header : { visible : true }i am using react-native cli. this is the example :

我正在使用header : null而不是header : { visible : true }使用 react-native cli。这是例子：

static navigationOptions = {
   header : null   
};

回答by Narayan Shrestha

Add new navigationOptions object in the stackNavigator.

在 stackNavigator 中添加新的 navigationOptions 对象。

Try this :

尝试这个 ：

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Hope it helps.

希望能帮助到你。

回答by Abhishek Kumar

In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}

在给定的解决方案中，HomeScreen 的标题是隐藏的，选项={{headerShown:false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

回答by Ernestyno

If someone searching how to toggle header so in componentDidMount write something like:

如果有人在 componentDidMount 中搜索如何切换标题，请编写如下内容：

  this.props.navigation.setParams({
      hideHeader: true,
  });

When

什么时候

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

And somewhere when event finish job:

当事件完成工作时的某个地方：

this.props.navigation.setParams({
  hideHeader: false,
});

回答by Diego Santa Cruz Mendezú

This worked for me:

这对我有用：

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);