无法成功调整浮动操作按钮包React Native

问题描述

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

我希望就我可能会出问题的地方获得一些建议。我一直在尝试查找其他软件包，但无法获得我想要的东西。当我尝试使用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。图标要好得多，但是我遇到的问题主要是无法单击项目后崩溃。我希望仅在按下主按钮时才能打开和关闭。

感谢您提供有关此功能的所有帮助和建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）