Как добавить иконку в меню рядом с названием маршрута

Question

Я пытался сделать так, чтобы значок домашней страницы отображался рядом с маршрутом домашней страницы в ящике меню.Когда я в первый раз перезагрузил экран после добавления кода значка, он показывал тот же экран, что и до интеграции кода, то есть имя страницы без значка в панели меню.После нескольких других модификаций я получил ошибку, которая остается даже после отмены модификации.Как сделать так, чтобы значок дома отображался рядом с названием дома?Пожалуйста, кто-нибудь может помочь?

вот ошибка, которая отображается:

Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(SyntaxError: /Users/camillebasbous/Project/Menu/DrawerNavigator.js: Unexpected token, expected ";" (19:11)

[0m [90m 17 | [39m[0m
[0m [90m 18 | [39m[0m
[0m[31m[1m>[22m[39m[90m 19 | [39m  render() {[0m
[0m [90m    | [39m           [31m[1m^[22m[39m[0m
[0m [90m 20 | [39m    [36mreturn[39m ([0m
[0m [90m 21 | [39m      [33m<[39m[33mView[39m style[33m=[39m{styles[33m.[39mcontainer}[33m>[39m[0m
[0m [90m 22 | [39m      [0m (null))

__38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228
    RCTCxxBridge.mm:414
___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118
__80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke
-[RCTMultipartStreamReader emitChunk:headers:callback:done:]
-[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:]
-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]
__88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke
__NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__
-[NSBlockOperation main]
-[__NSOperationInternal _start:]
__NSOQSchedule_f
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_continuation_pop
_dispatch_async_redirect_invoke
_dispatch_root_queue_drain
_dispatch_worker_thread2
_pthread_wqthread
start_wqthread

Я попытался изменить код, но произошла ошибка, поэтому я отменил его до последнего и попытался сбросить пакет, но я все ещеполучая ошибку, которую я имел с тех пор, как изменил ее

import * as React from 'react';
import { Text, View, Image, ScrollView, StyleSheet } from 'react-native';
import {
  createDrawerNavigator,
  createAppContainer,
  DrawerItems,
  SafeAreaView,
  contentOptions
} from 'react-navigation';
import homePage from './homePage'
import SettingScreen from './SettingScreen'
import LiveClips from './LiveClips'
import ViewStats from './ViewStats'
import TransferMethod from './TransferMethod'
import Icon from 'react-native-vector-icons/Ionicons'

класс DrawerNavigator extends React.Component {

  render() {
    return (
      <View style={styles.container}>

   <homePage/>

      </View>
    );
  }
}




const RouteConfigs = {
  Home: {
    screen: homePage,
  },
'Live clips':{
screen: LiveClips,

},
'View stats':{
screen: ViewStats,

},
'Transfer method':{
screen: TransferMethod,

},
  Settings: {
    screen: SettingScreen,
  },
};

const DrawerNavigatorConfig = {
  intialRouteName: 'Home',
  navigationOptions: {
  drawerIcon: ({ tintColor }) => (
          <Icon name= "home">

        </Icon>

  ),
  },
  contentOptions: {
    // add your styling here 
    activeTintColor: '#0D9DCE',
      inactiveTintColor: '#9B9B9B',
  labelStyle:{fontFamily:'Helvetica',
  fontSize: 14,},
    itemsContainerStyle: {
      marginVertical: 200,

    },
    iconContainerStyle: {
      opacity: 1,
    },
  },
  drawerBackgroundColor: '#262A2C', // sets background color of drawer
};

const Navigator = createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

 export default createAppContainer(Navigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',

  }
});

Answer 1

Ionicons имеет два имени для домашней иконки ios-home и md-home. Добавьте navigationOptions под каждым экраном, чтобы добавить значки.

const RouteConfigs = {
  Home: {
    screen: HomePage,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="ios-home" size={20} color={tintColor} />
      ),
    },
  },

  Settings: {
    screen: SettingScreen,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="ios-settings" size={20} color={tintColor} />
      ),
    },
  },
 ....
};

Рабочая демоверсия