TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

Question

我尝试使用 react-native-raw-bottom-sheet 作为可重用组件。我创建了一个父组件，问题是当我尝试给出值时出现此错误。

 TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

父组件

import React from 'react';
import RBSheet from 'react-native-raw-bottom-sheet';

const CustomActionSheet = (props) => {
  const { ref, Content, height } = { ...props };
  return (
    <RBSheet
      height={height}
      ref={ref}
      closeOnDragDown={true}
      closeOnPressMask={true}
      customStyles={{
        wrapper: {
          backgroundColor: 'transparent',
        },
        draggableIcon: {
          backgroundColor: '#000',
        },
      }}
    >
      {Content}
    </RBSheet>
  );
};

export default CustomActionSheet;

子组件

<View style={styles.chsDlvrBtn}>
          <Button title="Choose Delivery" onPress={() => refRBSheet.current.open()} />
        </View>
        <CustomActionSheet
          ref={refRBSheet}
          Content={
            <View style={styles.view}>
              {MONTH_OF_YEAR.map((val) => {
                return (
                  <Chip mode="outlined" onPress={() => {}} style={styles.chp}>
                    {val}
                  </Chip>
                );
              })}
            </View>
          }
        />

ref hook

const refRBSheet = useRef()

这里出了什么问题。谢谢，提前!!!

Answer 1

我只知道如何使用功能组件来做这个，但是这样做...

将 RBSheet 或任何引用的 sheet 放入子组件中
import child component into parent component(import component with slide-up sheet into main component
在父组件中创建一个 ref，类似 this.sheetRef = React.createRef();
将该 ref 作为 props 传递给你的 RBSheet 子组件（RBSheet 应该在子组件中——而不是父组件——你本质上是导入一个带有 RBSheet 的辅助组件）——应该看起来像<MyChildComponent {...otherProps} sheetRef={this.sheetRef} />
要在父组件中打开，请执行类似 this.sheetRef.current.open(); 的操作，而在子组件中，请执行类似 sheetRef.current.close();
的操作

子组件中的 RBSheet 应该类似于...

import RBSheet from 'react-native-raw-bottom-sheet'

const MyChildComponent = ({ sheetRef }) => {
useEffect(() => {
    sheetRef.current.close();
}, [])
return(
        <RBSheet
            ref={sheetRef} 
            closeOnDragDown={true}
            height={height * 0.90}
            openDuration={250}
            customStyles={{
                container: {
                    borderTopLeftRadius: 40,
                    borderTopRightRadius: 40
                },
                draggableIcon: {
                    backgroundColor: "grey",
                    width: 250
                }
            }}
            > 
        </RBSheet>
    );
};

父组件应该类似于...


class MyParentComponent extends Component {
constructor (props) {
super(props);
 this.sheetRef = React.createRef();
}
componentDidMount () {
   this.sheetRef.current.open();
}
render () {
  return (
     <Fragment>
          <MyChildComponent {...otherProps} sheetRef={this.sheetRef} />
     </Fragment>
  );
 }
}

TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

TypeError: undefined is not an object (evaluating 'refRBSheet.current.open')

react-native

actionsheet