React Native - Native Base FAB（浮动操作按钮）：单击 FAB 会自动调用子按钮“onpress”答案

【问题标题】：React Native - Native Base FAB (Floating Action Button): Clicking the FAB automatically calls sub-buttons 'onpress'React Native - Native Base FAB（浮动操作按钮）：单击 FAB 会自动调用子按钮“onpress”
【发布时间】：2017-11-13 04:19:06
【问题描述】：

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

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

我得到的行为： 1.点击FAB按钮 2.onPress定义在facebook的按钮被触发

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

<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>

【问题讨论】：

标签： reactjs react-native uibutton floating-action-button native-base

【解决方案1】：

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

【讨论】：