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

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

我从上面得出这个

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

Answer 3

尝试改用函数：

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