反应导航TabBarIcon没有出现

Question

我无法让TabBarIcon 出现在我的TabNavigator. 中我已经阅读了许多有类似问题的人的帖子，但他们的解决方案对我不起作用。我真的很希望能够为每个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：

图像名称的解析方式与解析 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

我已经设置了一个尽可能小的示例来在选项卡上显示图像而不是图标，看看this expo snack。不要在图像文件名中使用resizeMode 或spaces，因为您使用的是TabBar Icons_Feed.png。只需导入文件并以适当的高度和宽度使用它， 例如

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 获取可能的方法来管理图像并根据您的需要正确显示它。

Answer 3

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

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 应该也可以。