ReactNative应用在使用@gorhom/bottom-sheet时崩溃

d7v8vwbk  于 2023-11-21  发布在  React
关注(0)|答案(2)|浏览(180)

我们有一个Nx monorepo工作区,带有React Web应用和ReactNative移动的应用设置。
我们正在尝试使用@gorhom/bottom-sheet,但只要我们提出的bottomsheet的移动的应用程序是崩溃与以下错误-

ERROR  Error: Trying to convert a cyclic object to a shareable. This is not supported.

This error is located at:
    in GestureDetector (created by BottomSheetDraggableViewComponent)
    in BottomSheetDraggableViewComponent (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by BottomSheetContainerComponent)
    in BottomSheetContainerComponent (created by BottomSheet)
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (created by Settings)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by Settings)
    in Settings (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen
    in Unknown (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by StackNav)
    in StackNav (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MobileApp(RootComponent), js engine: hermes

字符串
这是我们使用的文档中的示例代码-

import React, { useCallback, useMemo, useRef } from 'react'
import { View, Text, StyleSheet, Button } from 'react-native'
import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

const Settings = () => {
    // ref
    const bottomSheetModalRef = useRef<BottomSheetModal>(null)

    // variables
    const snapPoints = useMemo(() => ['25%', '50%'], [])

    // callbacks
    const handlePresentModalPress = useCallback(() => {
        bottomSheetModalRef.current?.present()
    }, [])
    const handleSheetChanges = useCallback((index: number) => {
        console.log('handleSheetChanges', index)
    }, [])

    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <BottomSheetModalProvider>
                <View>
                    <Text>Settings</Text>
                    <View>
                        <Button onPress={handlePresentModalPress} title='Present Modal' color='black' />
                        <BottomSheetModal
                            ref={bottomSheetModalRef}
                            index={1}
                            snapPoints={snapPoints}
                            onChange={handleSheetChanges}
                        >
                            <View style={styles.contentContainer}>
                                <Text>Awesome 🎉</Text>
                            </View>
                        </BottomSheetModal>
                    </View>
                </View>
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
    )
}

export default Settings

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        justifyContent: 'center',
        backgroundColor: 'grey',
    },
    contentContainer: {
        flex: 1,
        alignItems: 'center',
    },
})


这是我们的package.json

{   
    "dependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@fullcalendar/core": "^5.11.3",
        "@fullcalendar/daygrid": "^5.11.3",
        "@fullcalendar/interaction": "^5.11.3",
        "@fullcalendar/list": "^5.11.3",
        "@fullcalendar/react": "^5.11.2",
        "@fullcalendar/timegrid": "^5.11.3",
        "@gorhom/bottom-sheet": "v5.0.0-alpha.3",
        "@mui/material": "^5.14.0",
        "@notifee/react-native": "^7.8.0",
        "@popperjs/core": "^2.11.0",
        "@react-native-async-storage/async-storage": "^1.17.12",
        "@react-native-clipboard/clipboard": "^1.11.2",
        "@react-native-community/datetimepicker": "^7.0.0",
        "@react-native-community/netinfo": "^9.3.7",
        "@react-native-firebase/app": "^17.3.2",
        "@react-native-firebase/crashlytics": "^17.3.2",
        "@react-native-firebase/messaging": "^17.4.2",
        "@react-native-masked-view/masked-view": "^0.2.8",
        "@react-navigation/drawer": "^6.6.2",
        "@react-navigation/native": "^6.1.6",
        "@react-navigation/native-stack": "^6.9.12",
        "@reduxjs/toolkit": "^1.9.5",
        "@sentry/browser": "^7.51.2",
        "@swc/helpers": "~0.5.0",
        "@tinymce/tinymce-react": "^4.3.0",
        "@transifex/cli": "^5.3.0",
        "@transifex/native": "^5.3.0",
        "@transifex/react": "^5.3.0",
        "ag-grid-enterprise": "^29.3.4",
        "ag-grid-react": "^29.3.4",
        "axios": "1.1.3",
        "bowser": "^2.11.0",
        "classnames": "^2.3.2",
        "docx-preview": "^0.1.15",
        "docx-templates": "^4.11.1",
        "firebase": "^9.22.0",
        "github-markdown-css": "^5.2.0",
        "gleap": "^10.0.5",
        "humanize-plus": "^1.8.2",
        "imask": "^6.6.1",
        "immer": "^9.0.1",
        "jwt-decode": "^3.1.2",
        "libphonenumber-js": "^1.10.30",
        "lodash": "^4.17.21",
        "lottie-react-native": "^5.1.6",
        "mathjs": "^11.8.0",
        "moment": "^2.29.4",
        "moment-timezone": "^0.5.43",
        "papaparse": "^5.4.1",
        "polished": "^4.2.2",
        "react": "18.2.0",
        "react-country-flag": "^3.1.0",
        "react-custom-scrollbars-2": "^4.5.0",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-dom": "18.2.0",
        "react-excel-renderer": "^1.1.0",
        "react-imask": "^6.6.1",
        "react-is": "18.2.0",
        "react-loading-skeleton": "^3.3.1",
        "react-markdown": "^8.0.7",
        "react-medium-image-zoom": "^5.1.6",
        "react-native": "0.72.3",
        "react-native-animatable": "^1.3.3",
        "react-native-calendars": "^1.1294.0",
        "react-native-code-push": "^8.0.1",
        "react-native-document-picker": "^8.1.4",
        "react-native-flipper": "^0.184.0",
        "react-native-floating-action": "^1.22.0",
        "react-native-gesture-handler": "^2.9.0",
        "react-native-get-random-values": "^1.8.0",
        "react-native-gleapsdk": "^9.0.4",
        "react-native-image-picker": "^5.3.1",
        "react-native-keyboard-accessory": "^0.1.16",
        "react-native-linear-gradient": "^2.6.2",
        "react-native-mask-input": "^1.2.3",
        "react-native-modal-datetime-picker": "^14.0.1",
        "react-native-orientation-locker": "^1.5.0",
        "react-native-paper": "^5.4.1",
        "react-native-pell-rich-editor": "^1.9.0",
        "react-native-plotly": "^6.0.0",
        "react-native-ratings": "^8.1.0",
        "react-native-reanimated": "^3.3.0",
        "react-native-render-html": "^6.3.4",
        "react-native-safe-area-context": "^4.5.0",
        "react-native-screens": "^3.20.0",
        "react-native-shake": "github:vinaythakurcn/react-native-shake",
        "react-native-skeleton-placeholder": "^5.2.4",
        "react-native-svg-flagkit": "^0.9.5",
        "react-native-toast-message": "^2.1.6",
        "react-native-vector-icons": "^9.2.0",
        "react-native-walkthrough-tooltip": "github:vinaythakurcn/react-native-walkthrough-tooltip",
        "react-native-webview": "^11.26.1",
        "react-native-wheel-color-picker": "^1.2.0",
        "react-pdf": "^6.2.2",
        "react-plotly.js": "^2.6.0",
        "react-popper": "^2.3.0",
        "react-redux": "^8.0.5",
        "react-responsive-modal": "^6.4.1",
        "react-style-proptype": "^3.2.2",
        "react-toastify": "^9.1.2",
        "react-transition-group": "^4.4.5",
        "react-use": "^17.4.0",
        "redux-flipper": "^2.0.2",
        "redux-persist": "^6.0.0",
        "redux-sentry-middleware": "^0.2.2",
        "redux-thunk": "^2.4.2",
        "rehype-katex": "^6.0.3",
        "remark-gfm": "^3.0.1",
        "remark-math": "^5.1.1",
        "rn-fetch-blob": "^0.12.0",
        "sanitize-html": "^2.10.0",
        "sparser": "^1.4.12",
        "striptags": "^3.2.0",
        "styled-components": "5.3.6",
        "tslib": "^2.3.0",
        "use-debounce": "^9.0.4",
        "uuid": "^9.0.0",
        "zod": "^3.21.4"
    },
    "devDependencies": {
        "@babel/core": "^7.14.5",
        "@babel/preset-react": "^7.14.5",
        "@commitlint/cli": "^17.0.0",
        "@commitlint/config-conventional": "^17.0.0",
        "@jscutlery/semver": "^3.0.0",
        "@nx/cypress": "16.1.4",
        "@nx/detox": "16.7.1",
        "@nx/eslint-plugin": "16.1.4",
        "@nx/jest": "16.7.1",
        "@nx/js": "16.7.1",
        "@nx/linter": "16.1.4",
        "@nx/react": "16.1.4",
        "@nx/react-native": "^16.7.1",
        "@nx/storybook": "^16.4.0",
        "@nx/web": "16.4.0",
        "@nx/webpack": "16.1.4",
        "@nx/workspace": "16.1.4",
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
        "@react-native-community/cli": "11.3.5",
        "@react-native-community/cli-platform-android": "11.3.5",
        "@react-native-community/cli-platform-ios": "11.3.5",
        "@react-native/metro-config": "^0.72.9",
        "@storybook/addon-essentials": "7.0.23",
        "@storybook/addon-jest": "^7.0.24",
        "@storybook/addon-links": "^7.0.24",
        "@storybook/addon-ondevice-actions": "^6.5.3",
        "@storybook/addon-ondevice-backgrounds": "^6.5.3",
        "@storybook/addon-ondevice-controls": "^6.5.3",
        "@storybook/addon-ondevice-notes": "^6.5.3",
        "@storybook/core-common": "^7.0.9",
        "@storybook/core-server": "7.0.23",
        "@storybook/react": "^7.0.10",
        "@storybook/react-native": "^6.5.3",
        "@storybook/react-vite": "7.0.23",
        "@storybook/testing-react": "^2.0.0",
        "@svgr/webpack": "^6.1.2",
        "@swc/cli": "~0.1.62",
        "@swc/core": "~1.3.51",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/jest-native": "5.4.2",
        "@testing-library/react": "14.0.0",
        "@testing-library/react-native": "12.1.2",
        "@testing-library/user-event": "^14.4.3",
        "@types/humanize-plus": "^1.8.0",
        "@types/jest": "^29.5.3",
        "@types/node": "18.14.4",
        "@types/papaparse": "^5.3.7",
        "@types/react": "18.0.28",
        "@types/react-dom": "18.0.11",
        "@types/react-is": "17.0.3",
        "@types/react-native": "0.72.2",
        "@types/redux-mock-store": "^1.0.3",
        "@types/redux-sentry-middleware": "^0.2.2",
        "@types/styled-components": "5.1.26",
        "@types/styled-components-react-native": "^5.2.1",
        "@typescript-eslint/eslint-plugin": "^5.58.0",
        "@typescript-eslint/parser": "^5.58.0",
        "@welldone-software/why-did-you-render": "^7.0.1",
        "abortcontroller-polyfill": "^1.7.5",
        "axios-mock-adapter": "^1.21.4",
        "babel-jest": "^29.6.1",
        "babel-plugin-styled-components": "1.10.7",
        "commitizen": "^4.3.0",
        "cypress": "^12.11.0",
        "cz-conventional-changelog": "^3.3.0",
        "detox": "^20.11.1",
        "eslint": "~8.15.0",
        "eslint-config-prettier": "8.1.0",
        "eslint-plugin-cypress": "^2.10.3",
        "eslint-plugin-import": "2.27.5",
        "eslint-plugin-jsx-a11y": "6.7.1",
        "eslint-plugin-react": "7.32.2",
        "eslint-plugin-react-hooks": "4.6.0",
        "genversion": "^3.1.1",
        "husky": "^8.0.3",
        "isomorphic-fetch": "^3.0.0",
        "javascript-obfuscator": "^4.0.2",
        "jest": "^29.6.1",
        "jest-circus": "^29.4.1",
        "jest-environment-jsdom": "^29.6.1",
        "jest-fetch-mock": "^3.0.3",
        "jest-react-native": "18.0.0",
        "jest-styled-components": "^7.1.1",
        "lint-staged": "^13.2.2",
        "metro": "0.76.7",
        "metro-babel-register": "0.76.7",
        "metro-config": "0.76.7",
        "metro-react-native-babel-preset": "0.76.7",
        "metro-react-native-babel-transformer": "0.76.7",
        "metro-resolver": "0.76.7",
        "msw": "^1.2.1",
        "node-fetch": "^2.6.12",
        "nx": "16.1.4",
        "nx-cloud": "latest",
        "prettier": "^2.6.2",
        "react-native-svg": "13.9.0",
        "react-native-svg-transformer": "1.0.0",
        "react-refresh": "^0.10.0",
        "react-test-renderer": "18.2.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-mock-store": "^1.5.4",
        "ts-jest": "^29.1.0",
        "ts-node": "10.9.1",
        "typescript": "~5.0.2",
        "url-loader": "^4.1.1",
        "vite": "^4.3.4",
        "webpack-merge": "^5.9.0",
        "webpack-obfuscator": "^3.5.1"
    },
    "lint-staged": {
        "packages/**/src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
        "packages/**/src/**/*.{js,jsx,ts,tsx,css,md}": "prettier --write"
    },
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
    },
    "overrides": {
        "@storybook/addon-actions": "7.0.23",
        "@storybook/addon-controls": "7.0.23"
    }
}


我也试过@gorhom/ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection),但同样的情况也发生了。

8qgya5xd

8qgya5xd1#

我确实使用这个软件包,试着适应你的情况,希望这对你有帮助。
我的组件:

import React, { useCallback, useMemo, useRef, memo, useState } from 'react';
import BottomSheet from '@gorhom/bottom-sheet';
import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
import { ch, cw } from '../../utils/DimensionsStyles';
import { ThemeConfig } from 'tailwindcss/types/config';
import { theme } from '../../../tailwind.config';
import useBottomSheetStore from '../../stores/bottomSheet';

type BottomSheetProps = {
  children?: React.ReactNode;
};

const { colors } = theme?.extend as ThemeConfig;

const styles = StyleSheet.create({
  line: {
    width: cw(75),
    height: ch(4),
    backgroundColor: colors['primary'],
    alignSelf: 'center',
    marginTop: ch(15),
    marginBottom: ch(25),
    borderRadius: 2,
  },
});

const CustomBottomSheet = ({ children }: BottomSheetProps) => {
  const { bottomSheet, setBottomSheet } = useBottomSheetStore(state => state);
  const [bottomSpace, setBottomSpace] = useState(0);

  const MAX_TRANSLATE_Y =
    Platform.OS === 'ios'
      ? bottomSheet.height?.ios + '%'
      : bottomSheet.height?.android + '%';

  const snapPoints = useMemo(
    () => [
      '10%',
      '20%',
      '30%',
      '40%',
      '50%',
      '60%',
      '70%',
      '80%',
      '90%',
      '100%',
    ],
    [],
  );

  const handleComponent = () => {
    return (
      <TouchableOpacity testID="top-line-button" onPress={handleMove}>
        <View style={styles.line} />
      </TouchableOpacity>
    );
  };

  const sheetRef = useRef<any>(null);

  const handleMove = () => {
    if (bottomSheet.indexBottomSheet > 1) {
      sheetRef.current?.collapse();

      setBottomSheet({
        ...bottomSheet,
        showBottomSheet: false,
        indexBottomSheet: 1,
        zIndex: -1,
      });

      switch (bottomSheet.component) {
        case 'Daily':
          Platform.OS === 'ios' ? setBottomSpace(20) : setBottomSpace(4);
          break;
        case 'Monthly':
          Platform.OS === 'ios' ? setBottomSpace(34) : setBottomSpace(38);

          break;
        case 'Range':
          Platform.OS === 'ios' ? setBottomSpace(0) : setBottomSpace(-20);

          break;
      }
    } else {
      sheetRef.current?.expand();
      setBottomSheet({
        ...bottomSheet,
        showBottomSheet: true,
        indexBottomSheet: 9,
        zIndex: 1,
      });
      setBottomSpace(0);
    }
  };

  const handleSheetChange = useCallback(index => {
    setBottomSheet({
      ...bottomSheet,
      indexBottomSheet: index,
      showBottomSheet: index > 0 ? true : false,
      zIndex: index > 0 ? 1 : -1,
    });
  }, []);

  return (
    <View
      style={{
        position: 'absolute',
        width: '100%',
        bottom: ch(bottomSpace),
        height: MAX_TRANSLATE_Y,
        zIndex: bottomSheet.zIndex,
      }}
      testID="bottom-sheet"
    >
      <BottomSheet
        ref={sheetRef}
        index={bottomSheet.indexBottomSheet}
        snapPoints={snapPoints}
        overDragResistanceFactor={0}
        handleComponent={handleComponent}
        onChange={handleSheetChange}
        backgroundStyle={{ borderRadius: 0 }}
      >
        {children}
      </BottomSheet>
    </View>
  );
};

export default memo(CustomBottomSheet);

字符串
My utils尺寸:

import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

const layoutScreenWidth = 375;
const layoutScreenHeight = 812;

export const cw = (pixels: number) => {
  const proportion = (pixels / layoutScreenWidth) * 100;
  return wp(proportion);
};

export const ch = (pixels: number) => {
  const proportion = (pixels / layoutScreenHeight) * 100;
  return hp(proportion);
};


我的商店与zustand:

import { create } from 'zustand';

export type BottomSheet = {
  showBottomSheet: boolean;
  component: string;
  indexBottomSheet: number;
  height?: {
    ios?: number;
    android?: number;
  };
  zIndex?: number;
};

export type BottomSheetState = {
  bottomSheet: BottomSheet;
  setBottomSheet: ({
    showBottomSheet,
    indexBottomSheet,
    component,
    height,
    zIndex,
  }: BottomSheet) => void;
  resetBottomSheet: () => void;
};

const useBottomSheetStore = create<BottomSheetState>()(set => ({
  bottomSheet: {
    showBottomSheet: false,
    component: 'Monthly',
    indexBottomSheet: 0,
    height: {
      ios: 65,
      android: 55,
    },
    zIndex: -1,
  } as BottomSheet,

  setBottomSheet: (bottomSheet: BottomSheet) =>
    set((state: BottomSheetState) => ({
      bottomSheet: {
        ...state.bottomSheet,
        ...bottomSheet,
      },
    })),
  resetBottomSheet: () =>
    set(() => ({
      bottomSheet: {
        showBottomSheet: false,
        component: 'Monthly',
        indexBottomSheet: 0,
        height: {
          ios: 65,
          android: 55,
        },
        zIndex: -1,
      },
    })),
}));

export default useBottomSheetStore;


的数据

4urapxun

4urapxun2#

我也遇到了同样的问题,但我有一个裸露的React Native仓库。
尝试通过运行以下命令将react-native-reanimated3.3.0降级到^2版本:
yarn upgrade react-native-reanimated@^2
如果你有一个使用cocoapods的项目,不要忘记再次安装pod。

相关问题