将 <Icon> 从 react-native-elements 添加到 bottomTabNavigator 显示错误

Question

我正在尝试使用 react-native-elements 中的图标向我的 bottomTabNavigator 添加图标。

import { createBottomTabNavigator } from "react-navigation"
import { ServicesNavigator } from "./services-navigator"
import { AccountScreen } from "../screens/account-screen/account-screen"
import { Icon } from "react-native-elements"

export const BottomTabNavigator = createBottomTabNavigator({
  services: {
    screen: ServicesNavigator,
    navigationOptions: {
      tabBarLabel:"Services",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="ios-build" type="Ionicon" size={10} />
      )
    },
  },
  account: { screen: AccountScreen },
})

上面的代码在 ios 中显示了以下错误：Unexpected token, expected "</>/<=/>=" 在 <Icon> 所在的行附近。我试过在线查看，但似乎无法解决我的问题。如有任何帮助，我们将不胜感激！

Answer 1

这些设置不应该在 RouteConfigs 中。学习https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance你应该多做一些

export const BottomTabNavigator = createBottomTabNavigator({
    services: ServicesNavigator,
    account: AccountScreen,
  },
  {
    defaultNavigationOptions: () => {
      tabBarIcon: () => <Icon name="ios-build" type="Ionicon" size={10} />
    },
  },
})

Answer 2

终于找到问题了。一直以来，我的文件扩展名是 .ts，不支持 jsx，而不是 .tsx。将文件扩展名更改为 .tsx 帮我做到了。

将 <Icon> 从 react-native-elements 添加到 bottomTabNavigator 显示错误

Adding <Icon> from react-native-elements to bottomTabNavigator shows error

icons

react-native

react-navigation

react-native-elements