پنهان کردن Navigation Bar در react native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری Navigation Bar رو در React Native پنهان کنیم و نمایشش ندیم.activity navigation که با Action Title Bar هم شناخته میشه برای نمایش عنوان activity همراه با یک آیکون مورد استفاده قرار میگیره.بصورت پیشفرض navigation bar در بالای صفحه اپلیکیشن قرار میگیره اما گاهی اوقات توسعه دهنده نیاز داره کلا حذفش کنه تا اپلیکیشن بصورت full screen نمایش داده بشه. ما با استفاده از header : null property بصورت کامل navigation bar رو حذف میکنیم.

1.نصب کتابخونه React Navigation در پروژه.برای نصب ، دایرکتوری پروژه رو در command prompt باز میکنیم و از دستور زیر رو اجرا میکنیم.

npm install --save react-navigation

1	npm install --save react-navigation

2.ایمپورت کردن کامپوننت های View, StyleSheet و Text در پروژه.

import React, { Component } from 'react';
 
import { View, StyleSheet, Text } from 'react-native';

import React, { Component } from 'react';

import { View, StyleSheet, Text } from 'react-native';

3.ایمپورت کردن StackNavigator از کتابخانه react navigation

import { StackNavigator } from 'react-navigation';

1	import { StackNavigator } from 'react-navigation';

4.ایجاد یک کلاس به نام MainActivity.

class MainActivity extends Component {
 
 
 
}

class MainActivity extends Component {

}

5.ایجاد static navigationOptions در MainActivity

title: این prop عنوان activity را مشخص میکند.

headerStyle : backgroundColor : برای مشخص کردن رنگ پس زمینه Navigation bar استفاده میشود.

headerTintColor: این prop رنگ متن عنوان درون Navigation bar را مشخص میکند.

header : null- این prop برای پنهان کردن navigation bar استفاده می شود.

static navigationOptions =
   {
      title: 'MainActivity',
 
      headerStyle: {
 
      backgroundColor: '#FFC107'
 
    },
 
    headerTintColor: '#fff',
 
    header : null
 
 };

static navigationOptions =

{

title: 'MainActivity',

headerStyle: {

backgroundColor: '#FFC107'

headerTintColor: '#fff',

header : null

};

6ایجاد بلاک render’s return در کلاس MainActivity و قرار دادن کامپوننت های View و Text در قسمت return

render()
   {
      return(
 
         <View style = { styles.MainContainer }>
 
            <Text style={styles.textStyle}> Hiding Navigation Bar in React Native. </Text>
          
         </View>
      );
   }

render()

{

return(

<Text style={styles.textStyle}> Hiding Navigation Bar in React Native. </Text>

</View>

);

}

7.استفاده از StackNavigator برای معرفی تمامی activity ها.

export default ActivityProject = StackNavigator(
{
  
  First: { screen: MainActivity }
 
});

export default ActivityProject = StackNavigator(

{

First: { screen: MainActivity }

});

8.ایجاد استایل سفارشی

const styles = StyleSheet.create({
 
  MainContainer :
  {
      flex:1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 10,
      backgroundColor: '#fff'
  },
 
  textStyle:{
      
    fontSize: 22, 
    textAlign: 'center',
    color: '#000'
  }
 
});

const styles = StyleSheet.create({

MainContainer :

{

flex:1,

justifyContent: 'center',

alignItems: 'center',

padding: 10,

backgroundColor: '#fff'

textStyle:{

fontSize: 22,

textAlign: 'center',

color: '#000'

}

});

9.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { View, StyleSheet, Text } from 'react-native';
 
import { StackNavigator } from 'react-navigation';
 
class MainActivity extends Component {
 
static navigationOptions =
   {
      title: 'MainActivity',
 
      headerStyle: {
 
      backgroundColor: '#FFC107'
 
    },
 
    headerTintColor: '#fff',
 
    header : null
 
   };
 
   render()
   {
      return(
 
         <View style = { styles.MainContainer }>
 
            <Text style={styles.textStyle}> Hiding Navigation Bar in React Native. </Text>
          
         </View>
      );
   }
}
 
export default ActivityProject = StackNavigator(
{
  
  First: { screen: MainActivity }
 
});
 
const styles = StyleSheet.create({
 
  MainContainer :
  {
      flex:1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 10,
      backgroundColor: '#fff'
  },
 
  textStyle:{
      
    fontSize: 22, 
    textAlign: 'center',
    color: '#000'
  }
 
});