react-native - 添加从 react-native-elements 到 bottomTabNavigator 显示错误

Question

我正在尝试使用来自的图标将图标添加到我的 bottomTabNavigator react-native-elements。

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 "</>/<=/>="在 where <Icon>is. 我已经尝试在网上查找，但我似乎无法解决我的问题。任何帮助将不胜感激！

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以为我完成。