反應本機導航選項卡欄

Question

我是新來的反應本地人，目前我正在努力。 我正在使用react-native-navigation依賴項來導航不同的頁面，但是即使我使用了選項卡欄選項並將show icon設置為true，它也不會在選項卡欄上顯示圖標，但仍然不顯示圖標。 這是我的代碼：

import React,{Component} from 'react';
import { Navigation } from 'react-native-navigation';

import Home from './screens/Home.js';
import Info from './screens/Info.js';
import Stats from './screens/Stats.js';
import Register from './screens/Register.js';
import Details from './screens/Details.js';
import SideMenu from './components/SideMenu.js';
import {Icon} from 'react-native-elements';
import { TabBarBottom} from 'react-navigation';
var homeIcon;

//const homeIcon = (<Icon name="home" size={30} color="#900" />);
const homeIcon=(<Icon
    name='share'
    type='font-awesome'
    color='black'
    size={18}
  />);
export default () => {

  Navigation.registerComponent('Home', () => Home);
  Navigation.registerComponent('Info', () => Info);
  Navigation.registerComponent('Stats', () => Stats);
  Navigation.registerComponent('Register', () => Register);
  Navigation.registerComponent('Details', () => Details);
  Navigation.registerComponent('SideMenu', () => SideMenu);


  Navigation.startTabBasedApp({

    tabs: [
      {
        label: 'Home',
        screen: 'Home',
        title: 'Home',
        icon: 'homeIcon'
          },
      {
        label: 'Info',
        screen: 'Info',
        title: 'Info',
        icon: 'homeIcon'
      },
      {
        label: 'Stats',
        screen: 'Stats',
        title: 'Stats',
        icon: require('./images/two.png'),
        //Icon.getImageSource('user', 20, 'green').then((source) =>     this.setState({ userIcon: source }));
      },
      {
        label: 'Register',
        screen: 'Register',
        title: 'Register',
        icon: 'homeIcon'
      },

    ],

    tabBarOptions:{
  showIcon:true
},
appStyle: {
 tabBarBackgroundColor: '#006600',
 tabBarButtonColor: '#ffffff',
 tabBarSelectedButtonColor: '#63d7cc',
 tabFontFamily: 'Avenir-Medium.ttf' , 
 forceTitlesDisplay: true,
 showIcon:true
  },
  });
};

請告訴我我在做什么錯。 謝謝！

Answer 1

icon: 'homeIcon'將icon屬性設置為String。 您想要將其設置為已創建的實際homeIcon對象，即icon: homeIcon 。

icon: require('./images/two.png')將icon屬性設置為可以正常工作的圖像。

Icon.getImageSource('user', 20, 'green').then((source) => this.setState({ userIcon: source })); 看起來像是嘗試使用react-native-vector-icons 。

使用react-native-vector-icons，我們異步加載圖標，然后將它們傳遞給 ：

async startApp() {
  const userIcon = await Icon.getImageSource('user', 20, 'green');
  Navigation.startTabBasedApp({

  tabs: [
    {
      label: 'Home',
      screen: Home,
      title: 'Home',
      icon: userIcon
    },
  }
}