React Native中bottom sheet点击关闭图标无响应问题求助

核心问题点 #

1. 关闭方法调用错误：你使用的react-native-simple-bottom-sheet库中，关闭面板的正确方法是togglePanel()，而非close()。代码里叉号按钮调用bottomSheetRef.current.close()无效，因为该库未暴露此方法。
2. 样式偏移破坏拖拽逻辑：bottomSheet样式中的marginTop: -20会让面板内容向上偏移，遮挡组件自带的顶部拖拽触发区域，导致点击顶部时面板下移后又弹回——拖拽手势未被正确识别。
3. onClose属性误用：BottomSheet的onClose是面板关闭后的回调函数，不是用来绑定关闭触发逻辑的。你将包含togglePanel()调用的closeBottomSheet传给onClose，可能引发不必要的循环触发。

修复后的代码 #

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 toggleBottomSheet = () => {
    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} maxHeight={500}>
        <View style={styles.bottomSheet}>
          <TouchableOpacity onPress={toggleBottomSheet} 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: 15,
    paddingTop: 20,
  },
  itemContainer: {
    backgroundColor: '#f2f2f2',
    padding: 10,
    borderRadius: 10,
    marginBottom: 17,
    marginHorizontal:15,
  },
  title: {
    fontSize: 24,
    fontWeight: '800',
  },
  create: {
    fontSize: 12,
    fontWeight: '600',
    color: '#0F8D48',
  },
  bottomSheet: {
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingHorizontal: 5,
    paddingBottom: 10,
  },
  separator: {
    height: 1,
    backgroundColor: '#ddd',
    marginVertical: 10,
    marginHorizontal:15,
  },
  list: {
    marginTop: 10,
  },
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
  },
  arrowIcon: {
    marginLeft: 10,
  },
  closeIcon: {
    position: 'absolute',
    top: 15,
    right: 15,
    zIndex:10,
  },
});

export default BottomSheet1;

额外注意事项 #

• 确认react-native-simple-bottom-sheet版本，部分旧版API可能有差异，建议核对官方文档确认方法名。
• fontWeight使用字符串值（如'800'）而非数字，避免在部分React Native版本中样式不生效。
• 绝对定位元素添加zIndex，确保不会被其他组件遮挡，保证点击事件正常触发。

内容的提问来源于stack exchange，提问作者AK_06