在bottomTab配置react-native-navigation中設置圖標大小

Question

我正在使用react native開發一個應用程序，並使用react-native-navigation庫創建一個底部選項卡。

在這里，我無法提供底部圖標的大小。 我正在使用尺寸為25 * 25的圖標，這在高分辨率設備中很模糊。 當我使用較大的圖標（例如30 * 30）時，圖標僅在ios中相互重疊。

貝婁是我經歷的一個環節： -

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到assets在Xcode和嘗試。

對於通過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}} />