无法在选项卡导航中显示图标 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 版本,则执行此操作的方法会有所不同。
我无法在 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 版本,则执行此操作的方法会有所不同。