React Native Navigation 5 中的自定义图像

Question

我有导航：

const Tab = createBottomTabNavigator();
const TabNavigator = () => (
    <NavigationContainer theme={navigationTheme}>
        <Tab.Navigator tabBarOptions={{
            showLabel: false,
        }}>
            <Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: <Image style={{width:22, height:22}} source = {require('../../assets/location.png')} />}} />
            <Tab.Screen name="Search" component={ProfileNavigator} options={{tabBarIcon: props => <SimpleLineIcons name="people" size={24} color="black" />}}/>
            <Tab.Screen name="Messages" component={MessagesScreen} options={{tabBarIcon: props => <AntDesign name="message1" size={24} color="black" />}} />
            <Tab.Screen name="Settings" component={SettingsNavigator} options={{tabBarIcon: props => <SimpleLineIcons name="settings" size={24} color="black" />}} />
        </Tab.Navigator>
    </NavigationContainer>
)

我试图在导致错误的第一个选项卡上使用自定义图像：

<Tab.Screen name="Home" component={HomeScreen} options={{tabBarIcon: <Image style={{width:22, height:22}} source = {require('../../assets/location.png')} />}} />

这很好用：

<Tab.Screen name="Settings" component={SettingsNavigator} options={{tabBarIcon: props => <SimpleLineIcons name="settings" size={24} color="black" />}} />

这是错误：

TypeError: renderIcon is not a function. (In 'renderIcon({
      focused: true,
      size: size,
      color: activeTintColor
    })', 'renderIcon' is an instance of Object)

问题是我正在尝试为我的标签栏图标使用自定义图像。

Answer 1

尝试像这样将 Image 组件传递给 tabBarIcon Prop

<Tab.Screen
  name={"Home"}
  component={HomeScreen}
  options={{
    tabBarIcon: () => {
      return <Image style={styles.icon} source={require('../../assets/location.png'} />
    }
  }}
/>

有关 tabBar Props 的更多详细信息：Docs

React Native Navigation 5 中的自定义图像

Custom Image in React Native Navigation 5

react-native

react-navigation