reactjs - フローティング アクション ボタン パッケージでアイコンのサイズを正常に変更できない React Native

Question

私が何を意味するかを示すために、下部に画像を提供します

私は自分の側で何がうまくいかないのかについてアドバイスを得たいと思っていました。さまざまなパッケージを探し続けていますが、欲しいものを手に入れることができません。使用しreact-native-floating-actionてみると、探していた適切なサイズが得られましたが、閉じる方法を制御できません。アイテムが押されたときに閉じたくないように。

私も使ってみreact-native-paperましたが、アイコンがとても小さいです。サイズを変更しようとすると、それらが途切れ始めるので、2つのうちの1つまたは他の何かがある場合は何かアドバイスを期待していました.

コード

    // 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. アイコンははるかに優れていますが、私が抱えている問題は、ほとんどの場合、アイテムをクリックした後にアクションが折りたたまれるのを防ぐことができないことです. メインボタンが押されたときにのみ開閉したいと思っています。

これについてのすべての助けとアドバイスに感謝します。