Question

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

简而言之：期望的behvaior： 1.单击FAB按钮 2.由于数字1，让facebook按钮出现 3.单击“Facebook”按钮以触发onPress

我得到的behvaior： 1.单击FAB按钮 2.触发facebook按钮中定义的onPress

我在代码中没有真正改变任何内容，这就是它的样子：

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

Answer 1

问题是此代码段是否从两个onPress函数更改了相同的状态。根据此this.state.fabActive=false，当您单击期望子按钮的FAB按钮时，值将更改为true。尝试两个独立的状态，这应该工作。

React Native - Native Base FAB（浮动操作按钮）：单击FAB会自动调用子按钮＆＃39; onpress＆＃39;

1 个答案: