在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

在Xcode中将images添加到assets并尝试。

对于通过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}} />