react-native - 单击徽章时,我可以让 NativeBase FAB 关闭 onPress 吗?
问题描述
我目前正在使用 NativeBase 的 FAB,它没有任何问题,除了当我单击已设置为按钮的徽章时,我无法使其关闭 FAB。我正在使用其中一个徽章来创建输入并打开键盘。这部分工作没有问题,但我无法让它关闭 FAB,当我尝试时,它只隐藏了除最后一个之外的所有徽章。
按下按钮后打开 FAB 这是我的组件的简化版本
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>
);
}
解决方案
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);
推荐阅读
- ios - 缩放场景视图以适应屏幕
- c - 如何将用户输入复制到 C 中的结构中?
- javascript - Mongo DB.find 返回空数组
- python - GeoPandas 通过忽略一些行政区域来绘制 shapefile
- php - WooCommerce 中生成的项目(产品)表在哪里
- c# - Unity3d Animator:NullReferenceException:对象引用未设置为对象的实例
- php - Nginx 配置兼容 Docker 和 Fargate
- swiftui - SwiftUI ActionSheet 如何更改取消颜色
- python - 如何在 Dockerfile 中激活 conda venv?(未找到点)
- ios - 放大 GraphQL API 与 iOS 14 部署目标不兼容?(扑)