如何从BottomSheetBtn组件修改UserInksBottomSheet的isOpen状态

要让子组件BottomSheetBtn修改父组件UserInksBottomSheet的isOpen状态，核心是把父组件的状态更新逻辑通过props传给子组件，子组件触发调用即可。具体步骤如下：

1. 父组件传递状态更新逻辑给子组件 #

修改UserInksBottomSheet中BottomSheetBtn的调用，把封装好的状态切换逻辑作为props传入：

import { StyleSheet, Text, View, useState, useRef } from 'react-native';
import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
import { TextInput } from 'react-native-gesture-handler';
import BottomSheetBtn from './BottomSheetBtn';


export default function UserInksBottomSheet(){
   
   const sheetRef = useRef<BottomSheet>(null);
   const [isOpen, SetIsOpen] = useState(true);
   
   const snapPoints = ['60%','90%'];

   // 封装弹窗状态切换逻辑
   const toggleSheetStatus = () => {
     SetIsOpen(prev => !prev);
     // 可选：结合BottomSheet的ref同步控制弹窗显示
     // isOpen ? sheetRef.current?.close() : sheetRef.current?.expand();
   }

   return(
      <BottomSheet
         ref={sheetRef}
         snapPoints={snapPoints}
         // 根据isOpen状态设置弹窗当前的展开位置
         index={isOpen ? 1 : -1}
      >
         <BottomSheetView style={styles.container}>
            BOTTOMSHEET CONTENT
            {/* 把切换函数传给子组件 */}
            <BottomSheetBtn onToggle={toggleSheetStatus} />
         </BottomSheetView>
      </BottomSheet>
   );
}

2. 子组件接收props并触发状态更新 #

修改BottomSheetBtn组件，接收父组件传来的onToggle属性，在点击事件中调用它：

// BottomSheetBtn.jsx
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function BottomSheetBtn({ onToggle }) {
  return (
    <TouchableOpacity 
      style={styles.btn}
      onPress={onToggle}
    >
      <Text style={styles.btnText}>切换弹窗状态</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: {
    padding: 12,
    backgroundColor: '#2196F3',
    borderRadius: 8,
    marginTop: 16,
  },
  btnText: {
    color: '#fff',
    textAlign: 'center',
    fontSize: 16,
  }
});

补充：结合@gorhom/bottom-sheet原生控制 #

如果你需要确保isOpen状态和弹窗实际显示完全同步，可以借助组件的ref调用库自带方法：

• 关闭弹窗：sheetRef.current?.close()
• 展开到最大高度：sheetRef.current?.expand()
• 切换到指定snap点：sheetRef.current?.snapToIndex(0)（对应60%的位置）

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