单击徽章时，我可以让 NativeBase FAB 关闭 onPress 吗？答案

【问题标题】：can I get NativeBase FAB to close onPress when clicking a badge?单击徽章时，我可以让 NativeBase FAB 关闭 onPress 吗？
【发布时间】：2019-07-08 04:10:55
【问题描述】：

我目前正在使用 NativeBase 的 FAB，它没有任何问题，除了当我点击我设置为按钮的徽章时，我无法让它关闭 FAB。我正在使用其中一个徽章来创建输入并打开键盘。这部分工作没有问题，但我无法让它关闭 FAB，当我尝试时，它只隐藏了除最后一个之外的所有徽章。

FAB open after button was pressed 这是我的组件的简化版本

    const FabButton = (props) => {
    const [active, setActive] = useState(false)

    return (
        <Fab
            active={active}
            direction="up"
            containerStyle={{}}
            position="bottomRight"
            onPress={() => setActive(!active)}>

            <Icon name="arrow-up" />
            <Button onPress={props.replyToComment}>
                <Icon name="md-code-working" />
            </Button>

        </Fab>
    );
}

【问题讨论】：

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

【解决方案1】：

Native Base 是一个沉重的 UI 库。您可以将此库https://github.com/mastermoo/react-native-action-button 用于浮动操作按钮，或者您必须自定义本机基础 FAB 组件。

示例如下：

 import React, {


Component
} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ActionButton from 'react-native-action-button';

class Basic extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Basic Example
        </Text>
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="me-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="me-notifications-off" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  }
});

AppRegistry.registerComponent('Basic', () => Basic);

【讨论】：

谢谢，我去看看，我猜他们只是还没有添加这个功能。
试过了，效果很好。设置起来也很容易，再次感谢。

【解决方案2】：

你可能想多了。您需要做的就是在单击按钮时更改活动状态:)

const FabButton = (props) => {
const [active, setActive] = useState(false)

return (
    <Fab
        active={active}
        direction="up"
        containerStyle={{}}
        position="bottomRight"
        onPress={() => setActive(!active)}>

        <Button onPress={() => {
          props.replyToComment
          setActive(false)            // <= add this
        }}>
          <Icon name="md-code-working" />
        </Button>

    </Fab>
  );
}

【讨论】：