스택 네비게이터에서 헤더 숨기기 React Navigation


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에서 사용하는 처음 두 구성 요소 에서이 코드를 시도하고 있습니다. 이 줄을 사용하면 다음과 같은 오류가 발생합니다.

여기에 이미지 설명 입력

답변:


330

버전 5부터 업데이트

버전 5로는 옵션 headerShown인은screenOptions

사용 예 :

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

한 화면에서만 헤더를 숨기려면 화면 구성 요소에서 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,
  }
 }
);

완벽하게 작동합니다! UR 대답에 감사하지만 이것을 추가 한 후 한 가지 문제가 있습니다. : stacknavigator를 tabnavigator로 전환하면 잘 작동합니다. tabnavigator에서 stacknaviagtor로 화면을 전환 할 때 헤더를 표시하려면 어떻게해야합니까?
Avijit Dutta 17.06.22

2
흠, 좋은 질문입니다. 솔직히 나는 그것을 모른다. 표시하려는 화면에서 @Dpkstr 답변을 시도 할 수 있습니다. null 대신 true가됩니다.
Perry

흠, 나는 이미 이것을 시도했지만 작동하지 않았습니다. 첫 번째 답변 감사합니다. 지금은 버튼으로 두 번째 기능을 만들어 보겠습니다.
Avijit Dutta 17.06.22

컴포넌트 내부의 버튼을 클릭 할 때 헤더를 동적으로 표시하고 숨기는 방법. static navigationOptions = {header : null}을 제공하면. 헤더를 완전히 숨길 것입니다. 나는 어떤 버튼을 클릭 할 때 숨기기를 표시하거나 할
Venkatesh 소무

1
그는 V5에서 특정 화면 숨기기 헤더 원한다면 + 사용해야 options같이 소품<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
올리버 D

130

헤더를 숨기려는 페이지에서 아래 코드를 사용하십시오.

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

Stack Navigator 참조


그것은 worikng 괜찮지 만, 하나의 문제는 그 때 stacknavigator에서가 TabNavigator에 화면 전환 (언급에 따라 두 헤더가 표시되는 시간에 목록 화면으로 OTPverification 화면처럼 내 질문의 구성 요소에
Avijit 두타

당신은 당신이 목록을 탐색하는 방법을 정확히 말해 줄 수
Dpkstr

22

이것을 클래스 / 컴포넌트 코드 스 니펫에 추가하면 헤더가 숨겨집니다.

 static navigationOptions = { header: null }

15

화면이 클래스 구성 요소 인 경우

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

첫 번째 방법 (함수)으로 대상 화면에 이것을 코딩하십시오.


1
바로, header: () => null올바른 방법입니다, 그렇지 않으면 페이지를로드 헤더 결함 얻을
크리스티안 TR

11

다음과 같이 특정 화면에서 숨기려면 다음을 수행하십시오.

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

10

내가 사용하고 header : null대신 header : { visible : true }내가 사용하고는 반응 네이티브 CLI를. 이것은 예입니다.

static navigationOptions = {
   header : null   
};

10

주어진 솔루션에서 헤더는 옵션 = {{headerShown : false}}에 의해 HomeScreen에 대해 숨겨집니다.

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

6

이것은 나를 위해 일했습니다.

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

4

대상 화면에서 이것을 코딩해야합니다!

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

4

다음과 같이 헤더를 숨길 수 있습니다.

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

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의 소품 Navigator을을 false.

<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 : null 또는 headerShown : false 를 설정할 수 있습니다 .

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. defaultNavigationOptions를 사용하여 한 번에 모든 화면에서 헤더를 숨 깁니다.

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

0

모든 화면에서 헤더를 제거하려면 app.js로 이동하고이 코드를 Stack.Navigator에 추가합니다.

screenOptions={ { headerShown: false } }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.