Блог

У меня есть реактивное приложение для IOS, в котором у меня есть DrawerNavigator и кнопка настроек внутри него.Когда я нажимаю на Настройки, он переходит на экран настроек.Но в настройках заголовок экрана не отображается.Ниже приведен навигатор, в котором есть DrawerNavigator

FRNavigator.js:

 import React from 'react'; import { View,StyleSheet,SafeAreaView,Button,ScrollView,Text} from 'react-native'; import { createSwitchNavigator,createAppContainer } from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack'; import MainPage from '../screens/FaceRecog/MainPage'; import UploadPage from '../screens/FaceRecog/UploadPage'; import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer'; import Icon from 'react-native-vector-icons/Ionicons'; import DownloadPage from '../screens/FaceRecog/DownloadPage'; //import RateUsScreen from '../screens/FaceRecog/RateUsScreen'; import ForgotPasswordScreen from '../screens/UI/ForgotPasswordScreen'; import ImageBrowserScreen from '../screens/FaceRecog/ImageBrowserScreen'; import LoginScreen from '../screens/UI/LoginScreen'; import RegisterScreen from '../screens/UI/Register'; import AddDevicePage from '../screens/FaceRecog/AddDevicePage'; import LogoutComponent from '../components/FaceRecog/LogoutComponent' import DrawerHeader from '../components/FaceRecog/DrawerHeader'; import CommunicateComponent from '../components/FaceRecog/CommunicateComponent'; import ManageDevice from '../screens/FaceRecog/ManageDevicePage'; import Register from '../screens/UI/Register'; import Settings from '../screens/FaceRecog/Settings';   const AuthNavigator = createStackNavigator( {  Login: {  screen:LoginScreen,  navigationOptions: {  headerShown: false, } }, SignUp: {  screen:Register, }, ForgotPasswordPage:ForgotPasswordScreen }, );  const MainPageNavigator = createStackNavigator({ Home:MainPage, AddDevice:AddDevicePage, Upload:UploadPage, ImagePicker:ImageBrowserScreen, ManageDev:ManageDevice }) const DrawerNavigator = createDrawerNavigator( {   Setting:  {  screen:Settings,  navigationOptions: {  headerShown: true,  }  },  Home: {  screen:MainPageNavigator,  navigationOptions:{  drawerIcon:(  lt;Icon  name='md-home-sharp' size={25} color='grey'/gt;  )  } },  Download: {  screen:DownloadPage,  navigationOptions:{  drawerIcon:(  lt;Icon  name='md-download'  type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;    )  } }, Exit: {  screen:Register,  navigationOptions:{  drawerIcon:(  lt;Icon  name='exit-outline'  type='ionicons' size={25} color='grey' onPress={ () =gt; {    }}/gt;    )  } }  },  { contentOptions:{ activeTintColor: '#e91e63',  },   contentComponent: (props) =gt; lt;ScrollViewgt;  lt;SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never',  height:180 }}gt;  lt;View style={{width:'100%', backgroundColor: 'white', }}gt;   lt;DrawerHeader /gt;  lt;/Viewgt;  lt;DrawerItems {...props} /gt;  lt;LogoutComponent /gt;  lt;View  style={{  borderBottomColor: 'grey',  borderBottomWidth: 1   }}/gt;   lt;View style={styles.communicateview}gt;  lt;Text style={styles.communicatetext}gt;Communicatelt;/Textgt;  lt;CommunicateComponent /gt;  lt;/Viewgt;  lt;/SafeAreaViewgt;  lt;/ScrollViewgt;,   },   );    const MainNavigator = createSwitchNavigator({  Auth: AuthNavigator  App:DrawerNavigator });   const styles = StyleSheet.create({  communicatetext:{  fontWeight:'800',  color:'grey'  },  communicateview:{  top:'3%',  left:'3%'  }  })   export default createAppContainer(MainNavigator);  

Ниже приведен компонент связи, на странице настроек которого установлено значение маршрутизатор.Ниже приведен код:

CommunicateComponent.js:

 import React from 'react'; import { Platform, TouchableOpacity, Alert, View, Text, StyleSheet ,ScrollView} from  'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import {withNavigation} from 'react-navigation';  const CommunicateComponent = (props)=gt;{  return( lt;Viewgt; lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='settings' type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  onPress={ ()=gt;props.navigation.navigate({routeName:'Setting'})} gt;  lt;Text style={styles.settingstext}gt; Settings lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='md-heart-circle' type='ionicons' size={25} color='grey'onPress={ () =gt; {    }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}   onPress={ ()=gt;props.navigation.navigate({routeName:'RateUs'})} gt;  lt;Text style={styles.settingstext}gt; Rate Us lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='ios-share-social' type='ionicons' size={25} color='grey'/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  gt;  lt;Text style={styles.settingstext}gt; Share lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;Viewgt;  lt;View style={styles.iconview}gt;  lt;Icon name='information-circle' type='ionicons' size={25} color='grey'onPress={ () =gt; {  }}/gt;  lt;/Viewgt;  lt;TouchableOpacity style={styles.logoutview}  gt;  lt;Text style={styles.settingstext}gt; About lt;/Textgt;lt;/TouchableOpacitygt;  lt;/Viewgt; lt;/Viewgt; ) }  const styles = StyleSheet.create({ iconview:{  top:'30%',  left:'3%' }, logoutview:{  left:'20%',  bottom:'20%'  }, settingstext:{  fontWeight:'bold' } })  export default withNavigation(CommunicateComponent);  

Below is Settings Page where I set Headertitle

Settings.js:

 import React from 'react'; import { View, StyleSheet ,Text} from 'react-native'; import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import HeaderButton from '../../components/UI/HeaderButton';   const Settings = props =gt; { return lt;View style={{flex:1,paddingTop:40,paddingLeft:20}}gt;  lt;Text style={{fontSize:20}}gt;Dark Mode lt;/Textgt; lt;View style={{ paddingTop:10, borderBottomColor: 'black', borderBottomWidth: 1, }}  /gt; lt;Text style={{fontSize:20,paddingTop:10}}gt;Cloud Endpointlt;/Textgt; lt;View style={{ paddingTop:10, borderBottomColor: 'black', borderBottomWidth: 1, }}  /gt; lt;/Viewgt;;  };  Settings.navigationOptions = navData =gt;{ return{ headerTitle: 'Back', headerTitleStyle:{  color:'white',   }, headerTitleAlign:"left", headerStyle: {  backgroundColor: '#0B0B45',   },  headerLeft: () =gt;  lt;HeaderButtons HeaderButtonComponent={HeaderButton}gt;  lt;Item  //title="Menu"  iconName={'chevron-back-outline'}  onPress={() =gt; {  navData.navigation.toggleDrawer();  }}  /gt;  lt;/HeaderButtonsgt;  }  };  export default Settings;  

Below is the Settings screen, where the Header is not displaying:

Can anyone tell do I need to add anything or need to change anything to get Header in the Settings Screen.Thanks in Advance.