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

Question

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

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中使用的前两个组件上尝试此代码.如果我使用这一行然后得到一些错误,如::

Answer 1

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

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

Answer 2

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

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

请参阅Stack Navigator

Answer 3

v6

headerModeprop 已从React navigation 6.x中删除。现在我们可以使用headerShown选项来达到相同的结果。

<Stack.Navigator screenOptions={{ headerShown: false }}>
   {/* Your screens */}
</Stack.Navigator>

v5

在React navigation 5.x中，您可以通过设置toheaderMode的属性来隐藏所有屏幕的标题。Navigatorfalse

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

Answer 4

React Native 导航 v6.x 2022 年 5 月

将属性false放入Screen 的options属性中headerShown

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

附言
const Stack = createNativeStackNavigator()。

Answer 5

{/*\xe2\x9c\x8c\xe2\x9c\x8c\xe2\x9c\x8c登录屏幕\xe2\x9c\x8c\xe2\x9c\x8c\xe2\x9c\x8c */}

\n

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

\n

Answer 6

只需将其添加到您的类/组件代码段中,就会隐藏Header

 static navigationOptions = { header: null }

Answer 7

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

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

Answer 8

如果你使用react-navigation版本：6.x，你可以这样使用。在这里，SignInScreen 标头将通过以下代码片段隐藏

options={{  
   headerShown: false,  
}} 

完整的脚本应该是

import {createStackNavigator} from '@react-navigation/stack';  
import SignInScreen from '../screens/SignInscreen';  
import SignUpScreen from '../screens/SignUpScreen';  
const Stack = createStackNavigator();    
function MyStack() {  
 return (   
   <Stack.Navigator>   
     <Stack.Screen   
       name="Sing In"  
       component={SignInScreen}  
       options={{  
         headerShown: false,  
       }}   
     />  
     <Stack.Screen name="Sing Up" component={SignUpScreen} />   
   </Stack.Navigator>   
 );    
}  
export default function LoginFlowNavigator() {    
 return <MyStack />;   
}

Answer 9

如果您的屏幕是类组件

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

在您的目标屏幕中将其编码为第一种方法(功能).

Answer 10

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

希望能帮助到你。

Answer 11

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

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

Answer 12

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

static navigationOptions = {
   header : null   
};

Answer 13

如果有人在搜索如何切换标题，那么在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,
});

Answer 14

您可以像这样隐藏标题：

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

Answer 15

尝试最好的方法，下面的代码对我有用。

options={{
    headerShown: false,
}}

将上面的代码放在<Stack.Screen标签中。

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

Answer 16

这为我工作：

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

Answer 17

使用

static navigationOptions = { header: null } 

在类/组件中

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

Answer 18

所有答案都展示了如何使用类组件来做到这一点，但对于功能组件，您可以这样做：

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

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

如果删除标头，您的组件可能会位于您看不到的地方（当手机没有方形屏幕时），因此在删除标头时使用它很重要。

Answer 19

对我来说navigationOptions没有用。以下内容对我有用。

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