我目前正在使用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);
你可能想多了。您需要做的就是在单击按钮时更改活动状态:)
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>
);
}