在bottomTab 配置中设置图标大小 react-native-navigation

Question

我正在用 react native 开发一个应用程序，并使用 react-native-navigation 库来创建一个底部选项卡。

在这里，我无法提供底部图标的大小。我现在正在使用大小为 25*25 的图标，这在高分辨率设备中是模糊的。当我使用较大的图标（例如 30*30）时，图标仅在 ios 中相互重叠。

react-native-navigation 库链接 - https://wix.github.io/react-native-navigation/#

以下是我浏览过的链接：-

https://github.com/wix/react-native-navigation/issues/3527#

https://github.com/wix/react-native-navigation/issues/4420

Navigation.setRoot({
        root: {
            bottomTabs: {
                children: [

                    {

                        stack: {
                            id: Stackid.Stackid2,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen1Stack,

                                    }
                                },
                            ],

                            options: {

                                bottomTab: {
                                    text: 'Tab1',
                                    fontSize: 12,
                                    icon: require('../assets/firstImage.png'), 
                                    iconColor:'red',
                                    currentTabId: Stackid.Screen1,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',


                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                },
                                statusBar: {
                                    visible: true,
                                    backgroundColor: 'grey',
                                    drawBehind: false,
                                    style: "light" //Or dark
                                },
                            }
                        }
                    },
                    {

                        stack: {
                            id: Stackid2,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen2,

                                    }
                                },
                            ],
                            options: {
                                bottomTab: {
                                    text: 'Tab2',
                                    fontSize: 12,
                                    icon: require('../assets/SecondImage.png'), 
                                    iconColor:'red',
                                    currentTabId: Stackid.Screen2,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',

                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                }
                            }
                        }
                    },
                    {
                        stack: {
                            id: Stackid.Stackid3,
                            children: [
                                {
                                    component: {
                                        name: ScreenId.Screen3,

                                    }
                                },
                            ],
                            options: {
                                bottomTab: {
                                    text: 'Tab3',
                                    fontSize: 12,
                                    icon: require('../assets/ThirdImage.png'),

                                    iconColor:'red',            
                                    currentTabId: Stackid.Screen3,
                                    selectedIconColor: 'green',
                                    textColor: 'white',
                                    selectedTextColor: 'green',

                                },
                                topBar: {
                                    drawBehind: true,
                                    visible: false,
                                    animate: false,
                                }
                            }
                        }
                    },




                ],
                tabBarOptions: {
                    style: {
                        // width: windowsWidth,
                        height: 170,
                    },
                    labelStyle: {
                        fontSize: 14,
                        color: 'black',
                    },
                }




            }
        }

    });

};

}

依赖项：-

"dependencies": {
    "lodash": "^4.17.11",
    "prop-types": "^15.6.2",
    "react": "16.6.3",
    "react-native": "^0.57.8",
    "react-native-elements": "^0.19.1",
    "react-native-iphone-x-helper": "^1.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-modal-datetime-picker": "^7.4.0",
    "react-native-navigation": "^2.3.0",
    "react-native-secure-key-store": "^2.0.2",
    "react-native-segmented-control-tab": "^3.3.1",

  },

请帮我。提前致谢。

Answer 1

添加images到assetsXcode 并尝试它们。

对于通过 Xcode 资产目录包含的图像，请使用不带扩展名的图像名称：

在 Xcode 中添加资源

例子

<Image source={{uri: 'AppIcon'}} style={{width: 40, height: 40}} />

如果您想在不同平台上以不同方式执行此操作，对于 Android 可绘制文件夹中包含的图像，请使用不带扩展名的图像名称：

let appicon = Platform.OS === "ios" ? "AppIcon" : "asset:/AppIcon.png"
<Image source={{uri: appicon }} style={{width: 40, height: 40}} />