Sembunyikan header di navigasi React stack navigator


136

Saya mencoba untuk beralih layar menggunakan stack dan tab navigator.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

Dalam hal ini stacknavigator digunakan terlebih dahulu dan kemudian tabnavigator. dan saya ingin menyembunyikan header dari stack navigator. WIt tidak berfungsi dengan baik ketika saya menggunakan opsi navigasi seperti:

navigationOptions: { header: { visible: false } }

Saya mencoba kode ini pada dua komponen pertama yang digunakan di stacknavigator. jika saya menggunakan baris ini maka mendapatkan beberapa kesalahan seperti:

masukkan deskripsi gambar di sini

Jawaban:


330

PERBARUI mulai dari versi 5

Pada versi 5 itu adalah opsi headerShowndiscreenOptions

Contoh penggunaan:

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

Jika Anda hanya ingin menyembunyikan header pada 1 layar, Anda dapat melakukannya dengan mengatur screenOptions pada komponen layar lihat di bawah ini misalnya:

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

Lihat juga blog tentang versi 5

UPDATE
Pada versi 2.0.0-alpha.36 (2019-11-07),
ada navigationOption baru:headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Jawaban lama

Saya menggunakan ini untuk menyembunyikan bilah tumpukan (perhatikan ini adalah nilai dari param kedua):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Saat Anda menggunakan metode ini, ini akan disembunyikan di semua layar.

Dalam kasus Anda, tampilannya akan seperti ini:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Bekerja dengan sempurna! terima kasih atas jawaban ur tetapi saya punya satu masalah setelah menambahkan ini yaitu :: beralih stacknavigator ke tabnavigator bekerja dengan baik. jika saya ingin menampilkan tajuk ketika saya beralih layar dari tabnavigator ke stacknaviagtor apa yang harus saya lakukan?
Avijit Dutta

2
Hmm, itu pertanyaan yang bagus. Sejujurnya saya tidak tahu itu. Anda dapat mencoba jawaban @Dpkstr pada layar yang ingin Anda tampilkan, alih-alih null, jawaban itu benar.
Perry

Hmm, saya sudah mencoba ini tetapi juga tidak berhasil ... terima kasih atas jawaban pertama Anda. Saya akan membuat fungsi kedua menggunakan tombol saja untuk saat ini.
Avijit Dutta

bagaimana menampilkan dan menyembunyikan header secara dinamis saat mengklik tombol di dalam komponen. Jika kita memberikan static navigationOptions = {header: null}. Saya akan menyembunyikan header sepenuhnya. Saya ingin menampilkan atau menyembunyikan saat mengklik beberapa tombol
Venkatesh Somu

1
Jika dia ingin menyembunyikan header untuk layar tertentu di v5 + harus menggunakan optionsprop seperti ini<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Cukup gunakan kode di bawah ini di halaman yang ingin Anda sembunyikan headernya

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

lihat Stack Navigator


Ini bekerja dengan baik, tetapi satu masalah adalah ketika layar beralih ke tabNavigator dari stacknavigator (sesuai yang disebutkan pada komponen pertanyaan saya seperti layar verifikasi OTP ke layar daftar pada saat itu kedua header ditampilkan
Avijit Dutta

Dapatkah Anda memberi tahu saya bagaimana tepatnya Anda menavigasi ke Daftar
Dpkstr

22

Cukup tambahkan ini ke dalam cuplikan kode kelas / komponen Anda dan Header akan disembunyikan

 static navigationOptions = { header: null }

15

Jika layar Anda adalah komponen kelas

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

kode ini di layar yang Anda targetkan sebagai metode (fungsi) pertama.


1
benar, header: () => nulladalah cara yang benar, jika tidak, Anda akan mendapatkan kesalahan header saat memuat halaman
Cristian Tr

11

Jika Anda ingin bersembunyi di layar tertentu daripada melakukan seperti ini:

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

10

Saya menggunakan header : nullbukannya header : { visible : true }saya menggunakan cli react-native. ini contohnya:

static navigationOptions = {
   header : null   
};

10

Dalam solusi yang diberikan, Header disembunyikan untuk HomeScreen oleh- options = {{headerShown: false}}

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

9

Tambahkan objek navigationOptions baru di stackNavigator.

Coba ini :

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

Semoga membantu.


7

Jika seseorang mencari cara mengubah header jadi di componentDidMount tulis sesuatu seperti:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Kapan

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

Dan di suatu tempat ketika acara selesai pekerjaan:

this.props.navigation.setParams({
  hideHeader: false,
});

6

Ini berhasil untuk saya:

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

4

Di layar yang Anda targetkan, Anda harus memberi kode ini!

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

4

Anda dapat menyembunyikan header seperti ini:

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

3

Ini berfungsi untuk navigasi tumpukan

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

2

Jika Anda hanya ingin menghapusnya dari satu layar react-native-navigationmaka:

<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

Semua jawaban menunjukkan bagaimana melakukannya dengan komponen kelas, tetapi untuk komponen fungsional yang Anda lakukan:

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

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

Jika Anda menghapus header, komponen Anda mungkin berada di tempat-tempat yang tidak dapat Anda lihat (saat ponsel tidak memiliki layar persegi) jadi penting untuk menggunakannya saat menghapus header.


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 }} bekerja untuk saya.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",


1

Dalam navigasi react 5.x Anda dapat menyembunyikan header untuk semua layar dengan mengatur headerModeprop Navigatorke false.

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

1

Anda dapat menyembunyikan header StackNavigator seperti ini:

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

Sangat penting untuk mencocokkan versi pustaka navigasi-reaksi yang Anda gunakan dengan solusi karena semuanya berbeda. Bagi mereka yang masih menggunakan react-navigation v1.0.0 karena alasan tertentu seperti saya, keduanya berfungsi:

Untuk menonaktifkan / menyembunyikan header di layar individu:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Untuk menonaktifkan / menyembunyikan semua layar sekaligus, gunakan ini:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

0

Di versi terbaru navigasi-reaksi, ini berfungsi untuk menyembunyikan header di setiap layar: headerMode = {'none'}

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


0

untuk 4.x, header: nulltidak digunakan lagi, harus digunakanheaderShown: false gantinya

ex:

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

0
  1. Untuk satu layar, Anda dapat menyetel header: null atau headerShown: false di createStackNavigator seperti ini

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Sembunyikan header dari semua layar sekaligus menggunakan defaultNavigationOptions

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

0

jika Anda ingin menghapus header dari semua layar, goto app.js dan tambahkan kode ini ke Stack.Navigator

screenOptions={ { headerShown: false } }
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.