我是 React Native 的新手,我正在尝试使用底部表格。出于某种原因,我无法在按下十字图标时关闭底页。下面是代码
import React, { useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
import BottomSheet from 'react-native-simple-bottom-sheet';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
const BottomSheet1 = () => {
const bottomSheetRef = useRef();
const closeBottomSheet = () => {
if (bottomSheetRef.current) {
bottomSheetRef.current.togglePanel();
}
};
const data = [
{ label: '2D Test' },
{ label: '2D Testing 2' },
{ label: '2D Testing 3' },
{ label: '2D Testing 1' },
{ label: '2D Testzaffar' },
{ label: '2D TestZaffar' },
];
const renderItem = ({ item }) => (
<View style={styles.itemContainer}>
<TouchableOpacity style={styles.item}>
<View style={styles.labelContainer}>
<Text style={styles.label}>{item.label}</Text>
<MaterialIcons name="keyboard-arrow-down" size={24} color="#555" style={styles.arrowIcon} />
</View>
</TouchableOpacity>
</View>
);
return (
<View style={styles.container}>
<BottomSheet ref={bottomSheetRef} onClose={closeBottomSheet} maxHeight={500}>
<View style={styles.bottomSheet}>
<TouchableOpacity onPress={() => bottomSheetRef.current.close()} style={styles.closeIcon}>
<MaterialIcons name="close" size={24} color="#555" />
</TouchableOpacity>
<View style={styles.header}>
<Text style={[styles.title, { fontFamily: 'Montserrat' }]}>Truminds</Text>
<Text style={styles.create}>+ Create Subspace</Text>
</View>
<View style={styles.separator} />
<FlatList
style={styles.list}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.label}
maxHeight={250}
/>
</View>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 0,
paddingTop: 48,
},
itemContainer: {
backgroundColor: '#f2f2f2',
padding: 10,
borderRadius: 10,
marginBottom: 17,
},
title: {
fontSize: 24,
fontWeight: 800,
},
create: {
fontSize: 12,
fontWeight: 600,
color: '#0F8D48',
},
bottomSheet: {
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingHorizontal: 5,
paddingBottom: 10,
marginTop: -20,
},
separator: {
height: 1,
backgroundColor: '#ddd',
marginVertical: 10,
},
list: {
marginTop: 10,
},
listItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 10,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
label: {
fontSize: 16,
fontWeight: 600,
},
arrowIcon: {
marginLeft: 10,
},
listArrowIcon: {
marginLeft: 10,
},
closeIcon: {
position: 'absolute',
top: 5,
right: 15,
},
});
export default BottomSheet1;
点击关闭图标没有反应。只有当我单击底部工作表的顶部时,它似乎会下降但会再次向上弹出。