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

Posted 2023-02-16

【中文标题】在bottomTab配置react-native-navigation中设置图标大小

【英文标题】：Set icon size in bottomTab configuration react-native-navigation

【发布时间】：2020-01-15 03:03:22

【问题描述】：

我正在用 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",

  ,

请帮助我。 提前致谢。

【问题讨论】：

你试过缩放吗？

@EdisonBiba，是的，我尝试了缩放，但在所有设备中并不一致，而且图像清晰度非常低。

【参考方案1】：

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

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

在 Xcode 中添加资源

示例

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

如果你想在不同的平台上做不同的事情， 对于 android drawable 文件夹中包含的图像，请使用不带扩展名的图像名称：

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

【讨论】：

感谢您的回复@hong 我已经实现了这一点，但在缩放图像后，与其他设备（7、X、Rr、Xs Max）相比，iPhone 5、6 中的图标变得更小。你能建议为什么会这样吗？现在对我来说一个新的挑战是在单个图像源中本地使用两个平台的图标。

图标的大小是固定的吗？当然，图标的大小取决于屏幕的大小。因为屏幕很大，所以图标必须更大。

如果你想在不同的平台上做不同的事情，你可以使用Platform

我根据您的需要编辑了我的答案。如果我的回答对您有帮助，请检查并选择“V”和箭头吗？

嗨，我非常接近通过实施上述解决方案来解决这个问题，但现在面临一些问题：1. 我无法使用 Image，因为 react-native-navigation 库不支持图片。 2. 当我提供高度和宽度时，它会崩溃 3. 我可以使用比例尺，但所有 iPhone 设备都不一致，4. 当我使用比例尺时，图标质量不好，这里缺少清晰度。跨度>