React Native-Native Base FAB(浮动操作按钮):单击FAB会自动将子按钮称为"onpress" [英] React Native - Native Base FAB (Floating Action Button): Clicking the FAB automatically calls sub-buttons 'onpress'

问题描述

我目前正在尝试从本机基础框架中实现浮动操作按钮(FAB).我只复制了代码，并向其中一个子按钮(本例中为Facebook-Logo)添加了一个onPress方法.但是，当我单击FAB按钮时会触发此onPress，而不是单击FAB按钮后应出现的facebook按钮.

I am currently trying to implement the floating action button (FAB) from the native-base framework. I simply copied the code, and added a single onPress method to one of the sub-buttoms (Facebook-Logo in this case). However, this onPress is triggered when I click the FAB button, instead of the facebook-button which should appear AFTER clicking the FAB button.

简而言之: 期望的行为: 1.点击FAB按钮 2.由于数字1，让facebook按钮出现 3.单击Facebook按钮触发onPress

In short: desired behvaior: 1. click FAB button 2. due to number 1, let facebook button appear 3. click facebook button to trigger onPress

我得到的行为: 1.点击FAB按钮 2.触发了Facebook按钮中定义的onPress

the behvaior I get: 1. click FAB button 2. onPress as defined in facebook's button is triggered

我并没有真正更改代码中的任何内容，如下所示:

I have not really changed anything in the code, here is what it looks like:

<Fab
                active={this.state.fabActive}
                direction="up"
                containerStyle={{ marginLeft: 10 }}
                style={{ backgroundColor: '#5067FF' }}
                position="bottomRight"
                onPress={() => this.setState({ feedbackComponentVisible: !this.state.fabActive })}>
                <Icon name="share" />
                <Button style={{ backgroundColor: '#34A34F' }}>
                    <Icon name="logo-whatsapp" />
                </Button>
                <Button style={{ backgroundColor: '#3B5998' }} onPress={() => this.setState({feedbackComponentVisible: true})}>
                    <Icon name="logo-facebook" />
                </Button>
                <Button disabled style={{ backgroundColor: '#DD5144' }}>
                    <Icon name="mail" />
                </Button>
</Fab>

推荐答案

问题是此代码段更改了两个onPress函数的相同状态. 据此，如果this.state.fabActive=false，则当您单击子按钮中期望的FAB按钮时，值将更改为true. 尝试使用两个单独的状态，这应该可以工作.

Problem is this code segment changing the same state from both onPress functions. According to this if this.state.fabActive=false then value will change to true when you click on the FAB button which you expecting from sub-button. Try with two separate states, this should work.

这篇关于React Native-Native Base FAB(浮动操作按钮):单击FAB会自动将子按钮称为"onpress"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！