尝试在 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

问题很简单，你不是返回图像

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

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