ซ่อนส่วนหัวใน stack navigator 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>

หากคุณต้องการเพียงซ่อนส่วนหัวใน 1 หน้าจอคุณสามารถทำได้โดยการตั้งค่าหน้าจอตัวเลือกบนส่วนประกอบหน้าจอดูตัวอย่างด้านล่าง:

<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 ถูกซ่อนไว้สำหรับ HomeScreen by- options = {{headerShown: false}}

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

ฉันใช้header : nullแทนheader : { visible : true }ฉันใช้ react-native cli นี่คือตัวอย่าง:

static navigationOptions = {
   header : null   
};

เพิ่มอ็อบเจ็กต์ navigationOptions ใหม่ใน stackNavigator

ลองสิ่งนี้:

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

หวังว่าจะช่วยได้

หากมีคนค้นหาวิธีการสลับส่วนหัวใน 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,
});

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

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

ในหน้าจอเป้าหมายของคุณคุณต้องเขียนโค้ดนี้!

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

คุณสามารถซ่อนส่วนหัวดังนี้:

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

สิ่งนี้ใช้ได้กับการนำทางแบบสแต็ก

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

หากคุณต้องการลบออกจากหน้าจอเดียวเท่านั้นreact-native-navigation:

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

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,

};

คำตอบทั้งหมดแสดงวิธีดำเนินการกับส่วนประกอบของคลาส แต่สำหรับส่วนประกอบที่ใช้งานได้คุณทำ:

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

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

หากคุณนำส่วนหัวออกส่วนประกอบของคุณอาจอยู่ในที่ที่คุณมองไม่เห็น (เมื่อโทรศัพท์ไม่มีหน้าจอสี่เหลี่ยม) ดังนั้นการใช้ส่วนหัวจึงเป็นสิ่งสำคัญเมื่อนำส่วนหัวออก

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

//header:null will be removed from upcoming versions

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

ในการตอบสนองนำทาง 5.xคุณสามารถซ่อนส่วนหัวสำหรับทุกหน้าจอโดยการตั้งheaderModeเสาของการNavigatorfalse

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

คุณสามารถซ่อนส่วนหัว 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>
    );
}

สิ่งสำคัญคือต้องจับคู่ไลบรารีการนำทางปฏิกิริยารุ่นใดที่คุณใช้กับโซลูชันเนื่องจากต่างกัน สำหรับผู้ที่ยังใช้ 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',
  }
);

ในเวอร์ชันล่าสุดของ react-navigation สิ่งนี้จะซ่อนส่วนหัวในทุกหน้าจอ: headerMode = {'none'}

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

สำหรับ 4.x ซึ่งheader: nullเลิกใช้แล้วควรใช้headerShown: falseแทน

อดีต:

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

1. สำหรับหน้าจอเดียวคุณสามารถตั้งค่าheader: nullหรือheaderShown: falseใน createStackNavigator ได้เช่นนี้

   const App = createStackNavigator({
    First: {
   screen: Home,
   navigationOptions: {
     header: null,
                      },
          },
   });

2. ซ่อนส่วนหัวจากหน้าจอทั้งหมดในครั้งเดียวโดยใช้ defaultNavigationOptions

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

หากคุณต้องการลบส่วนหัวออกจากหน้าจอ goto app.js ทั้งหมดและเพิ่มรหัสนี้ใน Stack.Navigator

screenOptions={ { headerShown: false } }