使 RBSheet 可重用为小部件 React-Native

Question

我正在使用 RBSheet Package 来显示我项目中的底部 sheet。我已经从文档中了解了如何使用它的概念。 有没有办法让底部 sheet 像 Widget 一样可重复使用？ 我试过这样做：

BottomSheetComponent.js

const BottomSheet = ({ message, buttonText }) => {
    // to open this sheet as soon as someone call this Component
    this.RBSheet.open();
    
    return(
        <RBSheet ref={ ref => { this.RBSheet = ref; }} 
            customStyles={{mask: { backgroundColor: COLORS.dark }, container: { elevation: 100 }}}>
            <View style={styles.messageContainer}>
               {/*  Add more data later */}
            </View>
        </RBSheet>
    );
}

export default BottomSheet;

MainComponent.js

const MainComponent = () => {
   const bottomSheet = () => {
      // Trying to call the bottom sheet here
      <BottomSheet />
   }

   return(
     <View>
        <Button onPress={() => bottomSheet()} title="Bottom Sheet" />
     </View>
   );
}

export default MainComponent;

摸底失败sheet。我刚刚开始研究 React Native。我不想使用包文档中解释的通用方法，从头开始在两个不同的页面中制作相同的底部 sheet 不是一个好习惯。

Answer 1

你能试试这个吗？

const bottomSheet = () => {
  // Trying to call the bottom sheet here
  return <BottomSheet />;
}

Answer 2

所以，经过大量研究，我终于弄清楚我做错了什么。

虽然我使用的是 Functional Component

Class Component

引用丢失，Metro Build Runner 给我错误。

解决方案

解决问题：

我需要创建自己的参考资料
将其传递给包的 ref 道具

MainComponent.js

import React, { useRef } from 'react';

const MainComponent = () => {
   
   // To be used for the reference for the bottom sheet
   const sheetRef = useRef();

   const bottomSheet = () => {
      // Here how you open the bottom sheet right
      sheetRef.current.open();
   }

   return(
     <View>
        <Button onPress={() => bottomSheet()} title="Bottom Sheet" />

        {/* Passing the sheet ref for the binding */}
        <BottomSheet sheetRef={sheetRef} />
     </View>
   );
}

export default MainComponent;

BottomSheet.js

const BottomSheet = ({ sheetRef }) => {
    
    return(
        {/* This is the place to make it work */}
        <RBSheet ref={sheetRef} 
            customStyles={{mask: { backgroundColor: COLORS.dark }, container: { elevation: 100 }}}>
            <View style={styles.messageContainer}>
               {/*  Add more data later */}
            </View>
        </RBSheet>
    );
}

export default BottomSheet;

使 RBSheet 可重用为小部件 React-Native

Make the RBSheet reusable as a widget React-Native

javascript

react-native

package

bottom-sheet