尝试在 react-native 的底部选项卡导航上添加图像时面临问题

Posted 2023-02-19

【中文标题】尝试在 react-native 的底部选项卡导航上添加图像时面临问题

【英文标题】：Facing issue when trying to add image on bottom tab navigation in react-native

【发布时间】：2021-01-21 03:29:25

【问题描述】：

当我尝试在底部标签导航中添加图像时，我只得到底部标签的标题。 如何在 react-native 的底部标签导航中获取图像？

我正在使用

从“@react-navigation/native”导入 NavigationContainer

从“@react-navigation/stack”导入 createStackNavigator

从“@react-navigation/bottom-tabs”导入 createBottomTabNavigator

这个库用于在 react native 中实现底部标签导航。

function TabNav() 
        return (
   
            <Tab.Navigator
                initialRouteName="Logbook"
                
                tabBarOptions=
                    activeTintColor: "#3498db",
                    
                
            >
                <Tab.Screen
                    name="Logbook"
                    component=Logbook
                    options=
                        tabBarLabel: 'Logbook',
                        tabBarIcon:(focused)=>
                            
                            focused?
                            <Image source=Images.logbookImg style=styles.activeImg />
                            : <Image source=Images.logbookImg style=styles.deActiveImg />
                        
                    
                
                />
                <Tab.Screen
                    name="Voyage"
                    component=Voyage
                    options=
                        tabBarLabel: 'Voyage',
                        tabBarIcon:(focused)=>
                            
                            focused?
                            <Image source=Images.voyageImg style=styles.activeImg />
                            : <Image source=Images.voyageImg style=styles.deActiveImg />
                        
                    
                />
                <Tab.Screen
                    component=Crew
                    name="Crew"
                    options=
                        tabBarLabel: 'Crew',
                        tabBarIcon:(focused)=>
                            
                            focused?
                            <Image source=Images.crewImg style=styles.activeImg />
                            : <Image source=Images.crewImg style=styles.deActiveImg />
                        
                    
                />
            </Tab.Navigator>
    
        )

【参考方案1】：

问题很简单，你没有返回图片

                    tabBarIcon:(focused)=>(
                        focused?
                        <Image source=Images.logbookImg style=styles.activeImg />
                        : <Image source=Images.logbookImg style=styles.deActiveImg />
                    )
                

用括号替换花括号或添加一个return语句，它会按预期工作。