将<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中显示了以下错误：<Icon>所在行周围的Unexpected token, expected "</>/<=/>="。我试过上网找，但似乎无法解决我的问题。任何帮助都会被感谢的！

Answer 1

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

Answer 2

这些设置不应该在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} />
    },
  },
})