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，我们异步加载图标，然后pass them in：

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

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

反应原生导航标签栏

1 个答案: