反应原生导航标签栏

问题描述：

我是新的反应本地和目前我正在处理它。我正在使用react-native-navigation依赖关系来导航不同的页面，但它不显示标签栏上的图标，即使我使用了标签栏选项并将show图标设置为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 
    }, 
    }); 
};

请告诉我我做错了什么。谢谢！

答

icon: 'homeIcon'将图标属性设置为字符串。您想将其设置为您创建的实际homeIcon对象，即icon: homeIcon。

icon: require('./images/two.png')将图标属性设置为可以正常工作的图像。

Icon.getImageSource('user', 20, 'green').then((source) => this.setState({ userIcon: source }));看起来像试图使用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 
    }, 
    } 
}

反应原生导航标签栏

相关推荐