BottomNavigation在React Native中不顯示@ expo / vector-icons

Question

我正在使用https://github.com/timomeh/react-native-material-bottom-navigation中的包。 該代碼取自該示例，但是未加載該示例中使用的圖標。

我試圖從另一個庫中借用： https : //github.com/oblador/react-native-vector-icons 。 但這也沒有幫助。

這是完整的組件：

...
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import Icon from '@expo/vector-icons/MaterialCommunityIcons'
interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>,
}
interface State {
  activeTab: number | string
}
class HomeScreen extends Component<Props, State> {
  static navigationOptions = {
    header: null,
  };
  constructor(props: Props) {
    super(props);
    this.state = {
      activeTab: 'games'
    }
  }
  tabs = [
    {
      key: 'games',
      icon: 'gamepad-variant',
      label: 'Games',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'movies-tv',
      icon: 'movie',
      label: 'Movies & TV',
      barColor: '#B71C1C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'music',
      icon: 'music-note',
      label: 'Music',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    }
  ]
  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )
  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your screen contents depending on current tab. */}
        </View>
        <BottomNavigation
          tabs={this.tabs}
          activeTab={this.state.activeTab}
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          useLayoutAnimation
        />
      </View>
    );
  }
}
...

那就是我現在得到的：

Answer 1

如果您可以安裝和使用expo-vector-icons模塊，

您的代碼沒有問題。 您可以在我創建的鏈接的示例中看到這一點。

要么

你可以試試這個

import { MaterialCommunityIcons } from '@expo/vector-icons'
...
renderIcon = icon => ({ isActive }) => (
    <MaterialCommunityIcons size={24} color="white" name={icon} />
  )