React Navigation TabBarIcon没有出现

Question

我无法让class UserInfo(models.Model): username = models.CharField(max_length=150) password = models.CharField(max_length=150) created_at = models.DateTimeField(default=datetime.now,blank=True) verified = models.BooleanField(default=0) def __str__(self): return self.username class List(models.Model): title = models.CharField(max_length=150) text = models.TextField(max_length=150) created_at = models.DateTimeField(default=datetime.now,blank=True) def __str__(self): return self.title 出现在我的TabBarIcon我已经阅读了一些有类似问题的人的帖子，但他们的解决方案对我不起作用。我真的希望每个TabNavigator.能够拥有一个PNG图像组件，但它不会出现。

TabBarIcon

任何人都知道发生了什么事？

Answer 1

您只需要确保您的文件没有空格名称。因此，将TabBar Icons_Feed.png更改为TabBar_Icons_Feed.png。因为android或ios会找到类似/xxxx/Resources/Images/TabBar%20Icons_Feed.png的名称。这实际上packager完成了这项工作。见here：

  

图像名称的解析方式与解析JS模块的方式相同。在   在上面的示例中，packager将在同一个中查找my-icon.png   文件夹作为需要它的组件。另外，如果你有   my-icon.ios.png和my-icon.android.png，打包者会选择   正确的平台文件。

检查有效/正确的路径文件

如果您看到.expo/packager-info.json：

{
  "expoServerPort": 19000,
  "packagerPort": 19001,
  "packagerPid": 84703
}

当您看到端口packager为19001时，您可以在浏览器中http://127.0.0.1:19001/Resources/Images/TabBar Icons_Feed.png（确保您已在运行应用）访问您的文件。您可以确保所有路径文件都正确。

Android上的许可

另外，如果您使用expo进行开发，请确保为android（source）设置写入抽屉的权限。

最佳实践

我通常使用import这样的图像：

import Icon_Feed from './Resources/Images/TabBarIcons_Feed.png';

...

tabBarIcon: () => (
    <Image
        source={Icon_Feed}
        style={styles.stretch}
        />
)

它有效且更具可读性。

Answer 2

你可以试试这个吗？这是我的设置：

const PrimaryNav = TabNavigator({
  ['app/t1']: { screen: T1 },
  ['app/t2']: { screen: T2 },
}, {
  headerMode: 'none',
  initialRouteName: 'app/t1',
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      if (routeName === 'app/t1') {
        return <Icon name="event-note" color={tintColor} />;
      } else if (routeName === 'app/t2') {
        return <Icon name="place" color={tintColor} />;
      }
      return null;
    },
  }),
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: ApplicationStyles.screen.header.tintColor,
    inactiveTintColor: ApplicationStyles.screen.header.inactiveTintColor,
    style: {
      backgroundColor: ApplicationStyles.screen.header.backgroundColor,
    },
  }
})

<Icon>是react-native-material-ui图标，但Image也可以正常工作。

Answer 3

我设置了一个尽可能小的示例，在标签上显示图片而不是图标在this expo snack上查看。在使用resizeMode时，请勿在图像文件名中使用spaces或TabBar Icons_Feed.png。只需导入文件并使用适当的高度和宽度， e.g。

import Icon_Feed from './Resources/Images/TabBar_Icons_Feed.png'; 

并像这样使用

tabBarIcon: () => (
    <Image source={Icon_Feed} style={{ height: 20, width: 20 }} />
),

或

如果您愿意，可以使用require。

tabBarIcon: () => (
    <Image source={require('./Resources/Images/TabBar_Icons_Feed.png')} style={{ height: 20, width: 20 }} />
),

Read this image guide by react native official documentation获取管理图片的可能方法，并根据您的需要正确显示图片。