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

스택 및 탭 탐색기를 모두 사용하여 화면을 전환하려고합니다.

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

답변

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

답변

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

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

Stack Navigator 참조

답변

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

 static navigationOptions = { header: null }

답변

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

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

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

답변

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

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

답변

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

static navigationOptions = {
   header : null   
};

답변

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

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