Question

TypeError：未定义不是一个对象（评估“refRBSheet.current.open”）

2021-05-01

3453

react-native actionsheet

我尝试使用 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()

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

Answer 1

我只知道如何使用功能组件执行此操作，但请执行以下操作...

将 RBSheet 或任何引用的工作表放入子组件中
将子组件导入父组件（将带有向上滑动工作表的组件导入主组件
在父组件中创建一个引用，例如 this.sheetRef = React.createRef();
将该引用作为 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>
  );
 }
}

Answer 2

尝试将 onPress={() => refRBSheet.current.open()} 替换为 onPress={() => refRBSheet?.current?.present()

Joumana Moussa

2022-07-06