React Native - Native Base FAB (Floating Action Bu

问题:

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.

In short: desired behvaior: 1. click FAB button 2. due to number 1, let facebook button appear 3. click facebook button to trigger 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>

回答1:

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.