Question

我正在使用react-navigation，我可以在其上创建带有文本标题的标签栏。我想在它们上显示图像而不是文本。有办法吗？

这是我正在使用的代码，但它不起作用。关于如何以正确的方式做到这一点的任何建议？

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

}

Answer 1

根据文档，showIcon属性在Android上设置为 false （https://web.archive.org/web/20171015002750/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" }}/>);}
    }
}

Answer 2

尝试改为使用函数：

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

Answer 3

我是从上面得出的

      <Tab.Screen
        name="Home"
        component={HomeNav}            
        options={{
          tabBarIcon: ({ color }) => (
            <Image
              style={styles.bottomTabIcon}
              source={require('../assets/icons/home.png')                  
              }/>
         ), 
         tabBarLabel: 'Home'             
        }}
      />

如何在反应导航标签栏中添加图像？

3 个答案: