reactjs - React 导航 TabBarIcon 未出现

Question

我无法在我的 TabNavigator 中显示 TabBarIcon。 我读过很多有类似问题的人的帖子，但他们的解决方案没有不为我工作。我真的很希望能够为每个 TabBarIcon 提供一个 PNG 图像组件，但它就是不会出现。

const Tabs = TabNavigator({
    Feed: {
      screen: FeedPage,
      navigationOptions: {
        tabBarLabel:"Feed",
        tabBarIcon: () => (<Image source={require('./Resources/Images/TabBar Icons_Feed.png')} style={{height: 10, width: 10}} />)
      }
    },
    Me: {
      screen: MePage,
      navigationOptions: {
        tabBarLabel:"Me",
      }
    },
  },
  {
    initialRouteName: 'Me',
    tabBarOptions: {
      showIcon: true,
      showLabel: true
    }
  }
);

const RootStack = StackNavigator(
  {
    //All Tabs
    Tabs: {
      screen: Tabs,
    },
    //Other Pages
    Signup: {
      screen: SignupPage,
    },
    ProfilePicUploader: {
      screen: ProfilePicUploaderPage,
    },
    Login: {
      screen: LoginPage,
    },
    User: {
      screen: UserPage,
    },
    EasterEgg: {
      screen: EasterEggPage,
    },
  },
  {
    initialRouteName: 'Tabs',
    headerMode: 'none'
  }
);

export default class App extends Component<Props> {
  render() {
    return (
      <RootStack/>
    );
  }
}

有人知道这是怎么回事吗？

Answer 1

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

The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for my-icon.png in the same folder as the component that requires it. Also, if you have my-icon.ios.png and my-icon.android.png, the packager will pick the correct file for the platform.

<小时/>

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

如果您看到.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 Icon_Feed from './Resources/Images/TabBarIcons_Feed.png';

...

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

它有效并且更具可读性。