在堆栈导航器中隐藏标题React导航


136

我正在尝试同时使用堆栈和标签导航器切换屏幕。

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

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

navigationOptions: { header: { visible: false } }

我正在在stacknavigator中使用的前两个组件上尝试此代码。如果我使用此行,则会出现类似以下错误:

在此处输入图片说明

Answers:


330

从版本5开始更新

截至5版本,它是选择headerShownscreenOptions

用法示例:

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

如果只想在1个屏幕上隐藏标题,则可以通过在屏幕组件上设置screenOptions来实现,例如:

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

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

更新
自版本2.0.0-alpha.36(2019-11-07)起,
有一个新的navigationOption:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

旧答案

我用它来隐藏堆栈栏(注意这是第二个参数的值):

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

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

在您的情况下,它将如下所示:

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

工作完美!感谢您的答复,但添加此后我有一个问题:如果我想在将屏幕从Tabnavigator切换到stacknaviagtor时显示标题,该怎么办?
Avijit Dutta

2
嗯,这是一个很好的问题。老实说,我不知道。您可以在要显示的屏幕上尝试@Dpkstr答案,而不是null,它将是真实的。
佩里

嗯,我已经尝试过了,但是也没有用...谢谢您的第一个回答。我现在仅使用一个按钮来实现第二个功能。
Avijit Dutta

单击组件内部的按钮时如何动态显示和隐藏标题。如果我们给定static navigationOptions = {header:null}。我将完全隐藏标题。单击某些按钮时我想显示或隐藏
Venkatesh Somu '18

1
如果他想在v5 +中隐藏特定屏幕的标题,则应使用options像这样的道具<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

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

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

请参阅堆栈导航器


很好,但是一个问题是,当屏幕从stacknavigator切换到tabNavigator时(按照我在问题组件(如OTPverification屏幕)到列表屏幕的提示,这两个标头都在此时显示
Avijit Dutta

您能告诉我您如何精确导航到列表
Dpkstr


15

如果您的屏幕是班级组件

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

在目标屏幕上将此代码编码为第一种方法(功能)。


1
正确,这header: () => null是正确的方法,否则在加载页面时会出现页眉故障
Cristian Tr

11

如果您想隐藏在特定屏幕上而不是这样做:

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

10

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

static navigationOptions = {
   header : null   
};

10

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

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

9

在stackNavigator中添加新的navigationOptions对象。

试试这个 :

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 } }
});

希望能帮助到你。


7

如果有人在搜索如何切换标题,那么在componentDidMount中编写如下内容:

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

什么时候

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>
    };
};

在事件完成工作的某个地方:

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


4

在目标屏幕中,您必须对此进行编码!

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


3

这适用于堆栈导航

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

2

如果您只想从一个屏幕中删除它,react-native-navigation则:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

1
const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

1

所有答案都显示了如何使用类组件进行操作,但是对于功能组件,您可以执行以下操作:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

如果卸下插头,则组件可能位于看不见的地方(当电话没有方形屏幕时),因此在卸下插头时使用它很重要。


1
const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

1
 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} 为我工作。

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",


1

反应导航5.x中,你可以通过设置隐藏所有屏幕上的标题headerMode中的道具Navigatorfalse

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

1

您可以像这样隐藏StackNavigator标头:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

0

将您使用的反应导航库版本与解决方案进行匹配非常重要,因为它们都不同。对于像我这样由于某些原因仍在使用react-navigation v1.0.0的用户,这两种方法都可以:

在各个屏幕上禁用/隐藏标题:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

要一次禁用/隐藏所有屏幕,请使用以下命令:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

0

在最新版本的react-navigation中,它可以在每个屏幕上隐藏标题:headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>


0

对于4.x,header: null已弃用,应headerShown: false改用

例如:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

0
  1. 对于单个屏幕,您可以像这样在createStackNavigator中设置header:nullheaderShown:false

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. 使用defaultNavigationOptions一次隐藏所有屏幕的标题

    const App = createStackNavigator({
    
    First: {
      screen: HomeActivity,
    },
    },
    
    {
    defaultNavigationOptions: {
      header: null
    },
    
    });

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.