尝试在react-native的底部标签导航中添加图像时遇到的问题

debugcn 发表于 Dev

拉格·辛格

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

古拉帕兰·吉里塔兰（Guruparan Giritharan）

问题很简单，您没有返回图像

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

将花括号替换为方括号或放入return语句，它将按预期工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。