在 react-native 中尝试在底部选项卡导航中添加图像时遇到问题

Question

当我尝试在底部标签导航中添加图像时，我只得到底部标签的标题。我如何在 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>
    
        )

Answer 1

问题很简单，你不在return图像中

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

用方括号替换大括号或放置 return 语句，它将按预期工作。

在 react-native 中尝试在底部选项卡导航中添加图像时遇到问题

Facing issue when trying to add image on bottom tab navigation in react-native

react-router

react-native

react-navigation-bottom-tab