无法在选项卡导航中显示图标 wix react-native-navigation

Can't display icons in tab navigation wix react-native-navigation

我无法在 iOS 模拟器中呈现选项卡图标。

Navigation.startTabBasedApp({
    tabs: [
        {
            label: 'Home',
            screen: 'Home', // this is a registered name for a screen
            icon: require('img_assets/icon_message.png'),
            iconInsets: { top: 0, left: 0, bottom: 0, right: 0 },
            visible: true,
            //selectedIcon: require('../img/one_selected.png'), // iOS only
            title: 'Homepage'
        },
        {
            label: 'Second',
            screen: 'Second',
            icon: js.Lib.require('img_assets/icon_cloud/cloud.png'),
            iconInsets: { top: 0, left: 0, bottom: 0, right: 0 },
            visible: true,
            //selectedIcon: require('../img/two_selected.png'), // iOS only
            title: 'Screen Two'
        }
    ],
    tabsStyle: {
        tabBarButtonColor: '#FF0000',
        tabBarSelectedButtonColor: '#00adf5'
    },
    appStyle: {
        tabBarButtonColor: '#000000', // BottomTabs unselected button color
        tabBarSelectedButtonColor: '#00adf5', // BottomTabs selected button color
    }
});

在package.json

"dependencies" : { ...
    "img_assets": "file:assets/"

截图:

环境

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5 CPU         750  @ 2.67GHz
      Memory: 32.35 MB / 12.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.0 => 0.57.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

您知道会发生什么吗? 我不再有错误(以前有错误)所以我猜图像现在是正确的 linked/loading。但是在屏幕上看不到任何内容。

问题出在图像本身以及 react-native-navigation 应用 "by default" 颜色色调的事实。

默认情况下没有重新缩放应用于图像,因此需要使用有效的分辨率创建它们(并处理@x1 @x2 和@x3)。 我认为禁用色调会对你有很大帮助:)
如果您使用的是导航库的 v1 或 v2 版本,则执行此操作的方法会有所不同。