reactjs - 无法成功调整浮动操作按钮包中的图标大小 React Native

Question

将在底部提供图像以显示我的意思

我希望得到一些关于我可能出了什么问题的建议。我一直在尝试寻找不同的包裹，但无法得到我想要的。当我尝试使用react-native-floating-action它时，它给了我我正在寻找的正确尺寸，但我无法控制关闭是如何完成的。就像我不希望它在按下项目时关闭。

我也尝试过使用react-native-paper，但图标太小了。如果我尝试调整它的大小，它们就会开始被切断，所以希望就两者之一或其他东西（如果有的话）提供一些建议。

代码

    // react-native-paper
    <Provider>
        <Portal>
            <FAB.Group
                style={{
                    backgroundColor: 'transparent',
                    height: '100%',
                    width: '100%'
                }}
                open={isOpen}
                fabStyle={{
                    marginBottom: 200,
                    backgroundColor: 'red'
                }}
                icon={(props) => (
                    <MaterialIcons
                        {...props}
                        name="add-circle-outline"
                        size={30}
                        color="white"
                        style={{
                            backgroundColor: 'blue',
                            position: 'absolute',
                            left: 0,
                            fontSize: 50,
                            width: 200
                        }}
                    />
                )}
                actions={[
                    {
                        icon: (props) => {
                            console.log(props);
                            return (
                                <Avatar
                                    containerStyle={{
                                        backgroundColor: 'blue'
                                    }}
                                    size={30}
                                    rounded
                                    source={{
                                        uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
                                    }}
                                >
                                    <AntDesign
                                        style={{ position: 'absolute', left: 10, top: 15, color: 'red' }}
                                        name="pluscircle"
                                        size={15}
                                        color="white"
                                    />
                                </Avatar>
                            );
                        },
                        onPress: () => console.log('Pressed star'),
                        style: {
                            backgroundColor: 'transparent',
                            size: 50,
                            backgroundColor: 'white'
                        }
                    },
                    {
                        icon: (props) => {
                            console.log(props);
                            return <AntDesign name="heart" size={props.size} color={props.color} />;
                        },
                        onPress: (e) => console.log(e)
                    },
                    {
                        icon: (props) => {
                            console.log(props);
                            return (
                                <AntDesign
                                    {...props}
                                    name="message1"
                                    color={props.color}
                                    style={{ width: props.size, height: props.size }}
                                />
                            );
                        },
                        onPress: () => console.log('Pressed notifications')
                    }
                ]}
                onStateChange={onStateChange}
                onPress={() => {
                    setIsOpen((prev) => !prev);
                    if (isOpen) {
                        // do something if the speed dial is open
                    }
                }}
            />
        </Portal>
    </Provider>
    // react-native-floating-action
    <FloatingAction
        onPressMain={(e) => console.log(e)}
        animated={false}
        color={'transparent'}
        showBackground={false}
        distanceToEdge={{ vertical: 100, horizontal: 20 }}
        floatingIcon={
            <View
                style={{
                    height: '100%',
                    width: '100%',
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
            >
                <MaterialIcons name="add-circle-outline" size={50} color="white" />
            </View>
        }
        position={'right'}
        actions={actions}
        onPressBackdrop={(s) => console.log(s)}
        onPressItem={(name) => {
            console.log('PRESSING');
            // console.log(floatB);
            // floatB.animateButton();
            if (name === 'bt_language') {
                navigation.navigate('Language');
            }
        }}
    />

在下图中。它显示了当我在使用时尝试增加图标的一侧时会发生什么react-native-paper。

下面的下一张图片是react-native-floating-action. 图标要好得多，但我遇到的问题主要是我无法阻止操作在单击项目后折叠。我希望只在按下主按钮时打开和关闭。

感谢您对此提供的所有帮助和建议。