Question

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

在从drawables加载它们时，我看到了android上tab-bar的图标的特定问题。我的代码如下所示适用于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无法从drawable中找到图像。
我尝试为图像指定高度/宽度（没有比例）但它仍然不起作用。
如果我使用require（''）加载JS中的图像，那么它可以正常工作，但我们想使用drawables。
我尝试删除比例，但仍然无效。
对于iOS，从xcassets加载图像并在标签栏中使用它没有任何问题。

版本信息：

react-native：0.52.0 react-native-navigation：1.1.314 Android版本：模拟器：Android 5.1，Android 6.0

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

感谢任何帮助。

注意：此问题不适用于反应导航。它是由https://wix.github.io/react-native-navigation/#/的wix提供的react-native-navigation库。

来自Android Drawables和iOS xcassets的react-native-navigation标签栏图标

0 个答案: