如何在反应导航标签栏内添加图片？

问题描述：

我正在使用react-navigation，我可以在其上创建带有文本标题的选项卡栏。我想在它们上面显示图像而不是文本。有没有办法做到这一点？如何在反应导航标签栏内添加图片？

这是我正在使用的代码，但它不起作用。任何关于如何正确使用它的建议？

static navigationOptions = { 
    tabBarIcon: (
    <Image style={{ width: 50, height: 50 }} 
     source={require('./../images/Logo.jpg')} /> 
)

}

答

尝试使用函数来代替：

static navigationOptions = { 
    tabBarIcon: (focused, tintColor) => (
     <Image style={{ width: 50, height: 50 }} 
      source={require('./../images/Logo.jpg')} /> 
    ) 
}

感谢您的链接，但它不工作。我收到错误'无效的关键tabBar'。 – Anupam

也许使用函数会有所帮助 - 更改答案。 – Kraylog

也试过这个，但它仍然不起作用 – Anupam

答

根据该文档，在showIcon属性被设置好的到在Android（https://reactnavigation.org/docs/navigators/tab#tabBarOptions-for-TabBarTop-default-tab-bar-on-Android）假。

你试过把它设置为真吗？

static navigationOptions = { 
    tabBarOptions: { showIcon: true, } 
    tabBarIcon: ({ tintColor }) => { 
       return (<Image 
        style={{ width: 50, height: 50 }} 
        source={{ uri: "https://facebook.github.io/react/img/logo_og.png" }}/>);} 
    } 
}

如何在反应导航标签栏内添加图片？

相关推荐