在 React Native 中，图标/图像不与 TabBarBottom 一起显示答案

【问题标题】：Icons/Images do not display with TabBarBottom in React Native在 React Native 中，图标/图像不与 TabBarBottom 一起显示
【发布时间】：2017-04-22 04:59:30
【问题描述】：

我几乎从 TabNavigator 文档中获取了示例代码，并且图标/图像根本不会出现在 iOS 或 Android 上。甚至标签覆盖似乎也没有生效。我做错了什么？

这是我一直在使用的文档的链接： https://reactnavigation.org/docs/navigators/tab

这是我的代码：

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Not displayed',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

const MyApp = TabNavigator({
  Displayed: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

【问题讨论】：

您确定在styles.icon 中设置了width 和height？
@ViktorSeč 是的，它就在 style sheet.create 代码中。

标签： react-native react-navigation

【解决方案1】：

好吧，在我想把脸撞到键盘上之后，我终于想通了。

标题和标签栏图标实际上与文档内部的结构不同。

  const MyApp = TabNavigator({
    Displayed: {
      screen: MyHomeScreen,
      navigationOptions: {
          title: 'Favorites',
          tabBar: {
            icon: ({tintColor}) => (<Image
              source={require('./chats-icon.png')}
              style={{width: 26, height: 26, tintColor: tintColor}}
            />)
          },
      },
    },
    ...

或

 class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',
        tabBar: {
            icon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26, height: 26, tintColor: tintColor}}
              />
            ),
        }
      };
 ...

【讨论】：

【解决方案2】：

至于react-navigation-tabs v2.6.2 现在是described in the doc。

要更新旧示例，您必须将 tabBar: { icon: ... } 替换为 tabBarIcon: ...

例如

 class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',
        tabBarIcon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26, height: 26, tintColor: tintColor}}
              />
            )
      };

【讨论】：

【解决方案3】：

我在堆栈溢出中寻找答案，而答案在文档本身中。用于在 react-native 底部选项卡中使用图像作为图标。这是根据当前的 React Navigation 4.x.

const tabNavigator = createBottomTabNavigator({
        Style: HomeScreen,
        Location: LocationScreen,   
    },
        {
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                    const { routeName } = navigation.state;
                    if (routeName === 'Style') {
                        return <Image
                            source={require('./screens/assets/notifications.png')}
                            style={{ height: 25, width: 25, tintColor: tintColor }}
                        />;
                    } else if (routeName === 'Location') {
                        return <Image
                            source={require('./screens/assets/location.png')}
                            style={{ height: 35, width: 35, tintColor: tintColor }}
                        />;
                    }
                },
            }),

        tabBarOptions: {
            activeTintColor: 'tomato', //For changing tint colors
            inactiveTintColor: 'gray',
        },
    }
),

您可以找到更多信息here。

【讨论】：

【解决方案4】：

遇到了同样的问题，但这个解决方案对我不起作用。导航选项中定义的无效键“tabBar”... 编辑：当我从我的标签导航器中删除 tabBarOptions 时，它开始工作了。而是使用了 activeTintColor 和 inactiveTintColor 作为 TabBarBottom 的 props。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击提问。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review
并删除 tabBar 键。并将 tabBarIcon 和 tabBarLabel 与选项卡导航器屏幕放在一起。