Question

我是React Native的新手，我想使用react-native-material-bottom-navigation。我发现了与此有关的其他问题，但无法为我提供一些启示。

我使用 npm 安装了依赖项，并运行了 react-native链接命令，然后执行了 react-native run-android

>

这是我在 App.js

中的代码

import React, { Component } from 'react';
import BottomNavigation, {
  FullTab
} from 'react-native-material-bottom-navigation'
import {
  View,
  Icon
  } from 'react-native';

export default class App extends Component {
  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
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />
      </View>
    )
  }
}

这是我的环境设置

Environment:
  OS: Linux 4.13
  Node: 8.11.3
  Yarn: 1.9.4
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

感谢有人可以帮助您。预先感谢。

Answer 1

我这样解决了我的问题：-

即使是反应本机0.60，也必须链接矢量图标库才能像这样反应本机

react-native link react-native-vector-icons

链接到React本机矢量图标库 https://www.npmjs.com/package/react-native-vector-icons#bundled-icon-sets

有很多可用的Icon捆绑包，您可以像下面给出的那样导入其中的任何一个。选择任何人

import Icon from 'react-native-vector-icons/FontAwesome';

或

import Icon from 'react-native-vector-icons/Ionicons';

示例

      <Icon
        style={{ paddingLeft: 10 }}
        onPress={() => navigation.openDrawer()}
        name="md-menu"
        size={30}
      />

如果这可以解决您的问题，请 请投票 ，并与您的朋友分享。

DevPremier.com

有关Javascript和ReactNative的更多教程- 访问YouTube频道-DevPremier https://www.youtube.com/channel/UC6np8ZmjDg0ccOwG3xU6a5Q

反应本机元素类型无效，应为字符串

1 个答案: