React Native组件报nothing was returned from render无法修复求助

存在的问题 #

• 外层PopSheet函数组件没有返回任何JSX，你内部定义的sheet函数仅做了声明没有被返回/调用，因此组件渲染逻辑识别不到返回内容
• BottomPopup组件的onTouchOutside属性写在了组件闭合标签/>外面，属于语法错误
• 你使用React.createRef创建的引用，调用方法需要访问.current属性，直接写popupRef.show()会抛出undefined报错
• TouchableWithoutFeedback组件内部为空，没有可点击的触发元素，即使修复其他问题也无法触发弹窗

修复后代码 #

function PopSheet() {
  const popupRef = React.createRef()

  const onShowPopup = () => {
    // createRef创建的引用需要通过current访问绑定的实例
    popupRef.current.show()
  }
  const onClosePopup = () => {
    popupRef.current.close()
  }

  // 外层组件直接返回要渲染的JSX，不需要额外套一层sheet函数
  return (
    <SafeAreaView style={styles.container}>
      <TouchableWithoutFeedback onPress={onShowPopup}>
        {/* 补充可点击的触发元素示例，可替换为你需要的内容 */}
        <View>
          <Text>点击打开弹窗</Text>
        </View>
      </TouchableWithoutFeedback>
      <BottomPopup 
        title="Demo Popup"
        ref={popupRef}
        {/* 把onTouchOutside属性放回组件标签内部 */}
        onTouchOutside={onClosePopup}
      />
    </SafeAreaView>
  );
}

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