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

Avijit Dutta
sumber

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

Dpkstr
sumber
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 }
Vaibhav Bacchav
sumber
15

Jika layar Anda adalah komponen kelas

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

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


sumber
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 };
}
Waqar UlHaq
sumber
10

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

static navigationOptions = {
   header : null   
};
Cara Cevin
sumber
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>
Abhishek Kumar
sumber
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.

Narayan Shrestha
sumber
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,
});
Ernestyno
sumber
6

Ini berhasil untuk saya:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);
Diego Santa Cruz Mendezú
sumber
4

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

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
Pheng Sengvuthy
sumber
4

Anda dapat menyembunyikan header seperti ini:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />
Arun D Nambissan
sumber
3

Ini berfungsi untuk navigasi tumpukan

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>
Sheyan Sandaruwan
sumber
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>
Mehdi Raza
sumber
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,

};
donald
sumber
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.

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

//header:null will be removed from upcoming versions
Farrukh Taqveem Haider
sumber
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",

mainak
sumber
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>
Ajay Sivan
sumber
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>
    );
}
Paresh Chavda
sumber
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',
  }
);
Edward Tan
sumber
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>

lamazing
sumber
0

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

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})
gasolin
sumber
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
    },
    
    });
Manan
sumber
0

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

screenOptions={ { headerShown: false } }
Mehrad Farahnak
sumber