如何在路线标题旁边的菜单抽屉中集成图标

Posted 2021-04-09

我一直试图让主页图标出现在菜单抽屉中的主页路径旁边。在集成图标代码后第一次重新加载屏幕时，它显示了与集成代码之前相同的屏幕，这是没有带菜单抽屉图标的页面名称。经过一些其他修改后，我收到了一个错误，即使在撤消修改后仍然存在。如何让主页图标出现在主页标题旁边？拜托，有人可以帮忙吗？

这是显示的错误：

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'

class DrawerNavigator扩展了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',

  }
});

答案

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} />
      ),
    },
  },
 ....
};

Working Demo