Question

我正在创建一个新的RN项目并第一次添加图标。我已使用this tool for rn-icons，并通过npm install添加到我的项目中。

示例代码：

import React from 'react';
import {Dimensions} from 'react-native';
import {Icon} from 'react-native-elements';
import {StackNavigator, TabNavigator} from 'react-navigation';

import BookCase from '../app/screens/BookCase';
import AddBook from '../app/screens/AddBook';
import Explore from '../app/screens/Explore';

let screen = Dimensions.get('window');

export const Tabs = TabNavigator({
'BookCase': {
    screen: BookCase,
    navigationOptions: {
        tabBarLabel: 'BookCase',
        tabBarIcon: ({tintColor}) => <Icon name='open-book'
                                           size={28}
                                           type='entypo'
                                           color={tintColor}/>
    }
},
'BookCase': {
    screen: Explore,
    navigationOptions: {
        tabBarLabel: 'Explore',
        tabBarIcon: ({tintColor}) => <Icon name='map'
                                           size={28}
                                           type='entypo'
                                           color={tintColor}/>
    }
},
'AddBook': {
    screen: AddBook,
    navigationOptions: {
        tabBarLabel: 'Add Book',
        tabBarIcon: ({tintColor}) => <Icon name='addfile'
                                           size={28}
                                           type='entypo'
                                           color={tintColor}/>
    }
},
'BookCase': {
    screen: Lists,
    navigationOptions: {
        tabBarLabel: 'My Reads',
        tabBarIcon: ({tintColor}) => <Icon name='md-list'
                                           size={28}
                                           type='entypo'
                                           color={tintColor}/>
    }
},
'BookCase': {
    screen: Profile,
    navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({tintColor}) => <Icon name='ios-person'
                                           size={28}
                                           type='entypo'
                                           color={tintColor}/>
    }
}
});

export const createRootNavigator = () => {
return StackNavigator({
    Tabs: {
        screen: Tabs,
        navigationOptions: {
            gesturesEnabled: true
        }
    }
})
};

我正在尝试构建一个简单的底部导航栏。我遵循了本教程-medium.com tutorial。在构建项目时，构建因以下错误而失败：

error: bundling failed: Error: Unable to resolve module `react-native-vector-icons/MaterialIcons` from `D:\ReactNativeDev\10Days\ten\node_modules\react-native-elements\src\buttons\Button.js`: Module `react-native-vector-icons/MaterialIcons` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (D:\ReactNativeDev\10Days\ten\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
at ResolutionRequest.resolveDependency (D:\ReactNativeDev\10Days\ten\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)

我已尝试通过遵循错误日志中的第一步来解决此问题，但随后它显示另一个错误-watchman is not recognized。我已经在问题页面上看到了答案，但答案是10个月前的React Native较旧版本，而现在却无法使用。有办法解决吗？谢谢。

带有React-Native-Elements图标的React Native问题

0 个答案: