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

时间:2017-06-22 13:45:25

标签: javascript react-native react-navigation expo

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

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

enter image description here

31 个答案:

答案 0 :(得分:92)

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

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

参考Stack Navigator

答案 1 :(得分:92)

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

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

答案 2 :(得分:19)

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

if self.navigationController?.interactivePopGestureRecognizer?.isEnabled != nil {
    self.navigationController?.interactivePopGestureRecognizer?.isEnabled = false
    } 

答案 3 :(得分:14)

在给定的解决方案中,通过- options = {{headerShown:false}}

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

答案 4 :(得分:8)

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

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

答案 5 :(得分:7)

如果您的屏幕是类组件

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

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

答案 6 :(得分:4)

您可以这样隐藏标题:

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

答案 7 :(得分:4)

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

希望有帮助。

答案 8 :(得分:4)

如果有人在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,
});

答案 9 :(得分:4)

使用

static navigationOptions = { header: null } 

中的类/组件中的

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

答案 10 :(得分:3)

我使用的是header : null而不是header : { visible : true },我使用的是react-native cli。这是示例:

static navigationOptions = {
   header : null   
};

答案 11 :(得分:3)

这适用于堆栈导航

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

答案 12 :(得分:3)

反应导航5.x 中,您可以通过将headerMode的{​​{1}}属性设置为Navigator来隐藏所有屏幕的标题。

false

答案 13 :(得分:2)

这对我有用:

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

答案 14 :(得分:2)

您可以这样隐藏StackNavigator标头:

calloc

答案 15 :(得分:2)

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

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

答案 16 :(得分:2)

 <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",

答案 17 :(得分:1)

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

//header:null will be removed from upcoming versions

答案 18 :(得分:1)

  

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

MongoDB extension version  1.2.9
 MongoDB extension stability    stable
 libbson bundled version    1.5.5
 libmongoc bundled version  1.5.5

答案 19 :(得分: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,

};

答案 20 :(得分:1)

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

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

答案 21 :(得分:1)

这将从组件类中删除标题。

export default class SampleClass extends Component {
    navigationOptions = {
       headerMode: 'none'
    }
...
}

答案 22 :(得分:1)

对我来说navigationOptions无效。以下对我有用。

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

答案 23 :(得分:0)

我遇到了同样的问题,但是我已经使用number = int(input("Enter a number between 0 and 1000: ")) while number in range (0, 1000): if number %2 == 0: print("The number you entered is even.") if number != 0: print("The number you entered is odd.") else: print("You entered an invalid number.") 在各个类中完成了标头工作,并且正在使用function sayHi() { var txtName = document.getElementById("txtName"); var divOutput = document.getElementById("divOutput"); var name = txtName.value; divOutput.innerHTML = "<em>" + name + "</em> is a very nice name."; // divOutput.innerHTML = "is a very nice name."; } ,其标头可见,而类的标头不可见。我已经尝试过诸如navigationOptionscreateBottomTabNavigator之类的所有方法,但是无法隐藏headerMode: none的标题。

答案 24 :(得分:0)

所有答案都显示了如何使用类组件,但是对于功能组件,您可以这样做:

#c

如果您删除标题,则组件可能位于看不见的地方(当手机没有方形屏幕时),因此删除标题时使用它很重要。

答案 25 :(得分: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',
  }
);

答案 26 :(得分:0)

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

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

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

答案 27 :(得分:0)

如果要从所有屏幕转到app.js删除标题并将此代码添加到Stack.Navigator

screenOptions={ { headerShown: false } }

答案 28 :(得分:0)

使用最新的react-navigation-stack v4,您可以使用

隐藏标题
import { createStackNavigator } from 'react-navigation-stack';

createStackNavigator({
 stackName: {
  screen:ComponentScreenName,
  navigationOptions: {
    headerShown:false
  }
 }
})

答案 29 :(得分:0)

V4 上你必须使用这个:

headerLeft: () => { }

这是已弃用

header: null

答案 30 :(得分:-1)

对于4.x,不推荐使用header: null,而应使用headerShown: false

例如:

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