1

我在我们的 react-native 应用程序中使用 react-native-navigation 作为首选的导航方法。我们计划对图标使用混合方法，我们仍然在 xcassets 和 drawables 中添加图标。

从drawables加载它们时，我看到android上标签栏图标的特定问题。我的代码如下，适用于 iOS：

标签定义：

const Tabs = [
{
    label: 'Home',
    screen: 'HomeScreen',
    //icon: require('../../assets/images/test.png'),
    icon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    selectedIcon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    title: 'Home'
},
{
    label: 'Message',
    screen: 'MessageScreen',
    icon: { uri: 'icon_home', scale: Dimensions.get('window').scale },
    selectedIcon: { uri: 'icon_home_selected', scale: Dimensions.get('window').scale },
    title: 'Message'
}]

导航代码：

_navigateToHomeScreen = () => {
Navigation.startTabBasedApp({
  tabs: Tabs,
  tabsStyle: tabsStyle,
  appStyle: tabsStyle
 });
}

标签样式：

tabStyle = {
  tabBarBackgroundColor: Colors.DefaultWhiteColor,
  tabBarButtonColor: Colors.NavigationBarItemColor,
  tabBarLabelColor: Colors.NavigationBarItemColor,
  tabBarSelectedButtonColor: Colors.PrimaryButtonBackground,
  tabBarSelectedLabelColor: Colors.PrimaryButtonBackground,
  forceTitlesDisplay: true
}

我们尝试过的：

  • 我尝试在列表视图中使用相同的图像，它显示正确，所以我认为 react-native 无法从可绘制中找到图像。
  • 我尝试为图像指定高度/宽度（不带比例），但它仍然不起作用。
  • 如果我使用 require('') 加载 JS 中的图像，那么它可以正常工作，但我们想使用 drawables。
  • 我试过去除水垢，但它仍然不起作用。
  • 对于 iOS，从 xcassets 加载图像并在标签栏中使用它没有任何问题。

版本信息：

反应原生：0.52.0 反应原生导航：1.1.314 Android 版本：模拟器：Android 5.1，Android 6.0

我们的选择已经不多了。最终的解决方案是使用本地图像而不是本地图像。

任何帮助表示赞赏。

注意：此问题不适用于反应导航。它适用于 wix 的 react-native-navigation 库，可在https://wix.github.io/react-native-navigation/#/获得。

4

0 回答 0