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

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

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

  1. ERROR  Error: Trying to convert a cyclic object to a shareable. This is not supported.
  3. This error is located at:
  4.     in GestureDetector (created by BottomSheetDraggableViewComponent)
  5.     in BottomSheetDraggableViewComponent (created by BottomSheet)
  6.     in RCTView (created by View)
  7.     in View (created by AnimatedComponent(View))
  8.     in AnimatedComponent(View)
  9.     in Unknown (created by BottomSheet)
  10.     in RCTView (created by View)
  11.     in View (created by AnimatedComponent(View))
  12.     in AnimatedComponent(View)
  13.     in Unknown (created by BottomSheet)
  14.     in RCTView (created by View)
  15.     in View (created by BottomSheetContainerComponent)
  16.     in BottomSheetContainerComponent (created by BottomSheet)
  17.     in BottomSheetGestureHandlersProvider (created by BottomSheet)
  18.     in BottomSheet (created by BottomSheet)
  19.     in PortalHostComponent (created by PortalProviderComponent)
  20.     in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
  21.     in BottomSheetModalProviderWrapper (created by Settings)
  22.     in RNGestureHandlerRootView (created by GestureHandlerRootView)
  23.     in GestureHandlerRootView (created by Settings)
  24.     in Settings (created by SceneView)
  25.     in StaticContainer
  26.     in EnsureSingleNavigator (created by SceneView)
  27.     in SceneView (created by SceneView)
  28.     in RCTView (created by View)
  29.     in View (created by DebugContainer)
  30.     in DebugContainer (created by MaybeNestedStack)
  31.     in MaybeNestedStack (created by SceneView)
  32.     in RCTView (created by View)
  33.     in View (created by SceneView)
  34.     in RNSScreen
  35.     in Unknown (created by InnerScreen)
  36.     in Suspender (created by Freeze)
  37.     in Suspense (created by Freeze)
  38.     in Freeze (created by DelayedFreeze)
  39.     in DelayedFreeze (created by InnerScreen)
  40.     in InnerScreen (created by Screen)
  41.     in Screen (created by SceneView)
  42.     in SceneView (created by NativeStackViewInner)
  43.     in Suspender (created by Freeze)
  44.     in Suspense (created by Freeze)
  45.     in Freeze (created by DelayedFreeze)
  46.     in DelayedFreeze (created by ScreenStack)
  47.     in RNSScreenStack (created by ScreenStack)
  48.     in ScreenStack (created by NativeStackViewInner)
  49.     in NativeStackViewInner (created by NativeStackView)
  50.     in RNCSafeAreaProvider (created by SafeAreaProvider)
  51.     in SafeAreaProvider (created by SafeAreaInsetsContext)
  52.     in SafeAreaProviderCompat (created by NativeStackView)
  53.     in NativeStackView (created by NativeStackNavigator)
  54.     in PreventRemoveProvider (created by NavigationContent)
  55.     in NavigationContent
  56.     in Unknown (created by NativeStackNavigator)
  57.     in NativeStackNavigator (created by StackNav)
  58.     in StackNav (created by App)
  59.     in EnsureSingleNavigator
  60.     in BaseNavigationContainer
  61.     in ThemeProvider
  62.     in NavigationContainerInner (created by App)
  63.     in App
  64.     in RCTView (created by View)
  65.     in View (created by AppContainer)
  66.     in RCTView (created by View)
  67.     in View (created by AppContainer)
  68.     in AppContainer
  69.     in MobileApp(RootComponent), js engine: hermes

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

  1. import React, { useCallback, useMemo, useRef } from 'react'
  2. import { View, Text, StyleSheet, Button } from 'react-native'
  3. import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet'
  4. import { GestureHandlerRootView } from 'react-native-gesture-handler'
  6. const Settings = () => {
  7.     // ref
  8.     const bottomSheetModalRef = useRef<BottomSheetModal>(null)
  10.     // variables
  11.     const snapPoints = useMemo(() => ['25%', '50%'], [])
  13.     // callbacks
  14.     const handlePresentModalPress = useCallback(() => {
  15.         bottomSheetModalRef.current?.present()
  16.     }, [])
  17.     const handleSheetChanges = useCallback((index: number) => {
  18.         console.log('handleSheetChanges', index)
  19.     }, [])
  21.     return (
  22.         <GestureHandlerRootView style={{ flex: 1 }}>
  23.             <BottomSheetModalProvider>
  24.                 <View>
  25.                     <Text>Settings</Text>
  26.                     <View>
  27.                         <Button onPress={handlePresentModalPress} title='Present Modal' color='black' />
  28.                         <BottomSheetModal
  29.                             ref={bottomSheetModalRef}
  30.                             index={1}
  31.                             snapPoints={snapPoints}
  32.                             onChange={handleSheetChanges}
  33.                         >
  34.                             <View style={styles.contentContainer}>
  35.                                 <Text>Awesome 🎉</Text>
  36.                             </View>
  37.                         </BottomSheetModal>
  38.                     </View>
  39.                 </View>
  40.             </BottomSheetModalProvider>
  41.         </GestureHandlerRootView>
  42.     )
  43. }
  45. export default Settings
  47. const styles = StyleSheet.create({
  48.     container: {
  49.         flex: 1,
  50.         padding: 24,
  51.         justifyContent: 'center',
  52.         backgroundColor: 'grey',
  53.     },
  54.     contentContainer: {
  55.         flex: 1,
  56.         alignItems: 'center',
  57.     },
  58. })

型
这是我们的package.json

  1. {   
  2.     "dependencies": {
  3.         "@emotion/react": "^11.11.1",
  4.         "@emotion/styled": "^11.11.0",
  5.         "@fullcalendar/core": "^5.11.3",
  6.         "@fullcalendar/daygrid": "^5.11.3",
  7.         "@fullcalendar/interaction": "^5.11.3",
  8.         "@fullcalendar/list": "^5.11.3",
  9.         "@fullcalendar/react": "^5.11.2",
  10.         "@fullcalendar/timegrid": "^5.11.3",
  11.         "@gorhom/bottom-sheet": "v5.0.0-alpha.3",
  12.         "@mui/material": "^5.14.0",
  13.         "@notifee/react-native": "^7.8.0",
  14.         "@popperjs/core": "^2.11.0",
  15.         "@react-native-async-storage/async-storage": "^1.17.12",
  16.         "@react-native-clipboard/clipboard": "^1.11.2",
  17.         "@react-native-community/datetimepicker": "^7.0.0",
  18.         "@react-native-community/netinfo": "^9.3.7",
  19.         "@react-native-firebase/app": "^17.3.2",
  20.         "@react-native-firebase/crashlytics": "^17.3.2",
  21.         "@react-native-firebase/messaging": "^17.4.2",
  22.         "@react-native-masked-view/masked-view": "^0.2.8",
  23.         "@react-navigation/drawer": "^6.6.2",
  24.         "@react-navigation/native": "^6.1.6",
  25.         "@react-navigation/native-stack": "^6.9.12",
  26.         "@reduxjs/toolkit": "^1.9.5",
  27.         "@sentry/browser": "^7.51.2",
  28.         "@swc/helpers": "~0.5.0",
  29.         "@tinymce/tinymce-react": "^4.3.0",
  30.         "@transifex/cli": "^5.3.0",
  31.         "@transifex/native": "^5.3.0",
  32.         "@transifex/react": "^5.3.0",
  33.         "ag-grid-enterprise": "^29.3.4",
  34.         "ag-grid-react": "^29.3.4",
  35.         "axios": "1.1.3",
  36.         "bowser": "^2.11.0",
  37.         "classnames": "^2.3.2",
  38.         "docx-preview": "^0.1.15",
  39.         "docx-templates": "^4.11.1",
  40.         "firebase": "^9.22.0",
  41.         "github-markdown-css": "^5.2.0",
  42.         "gleap": "^10.0.5",
  43.         "humanize-plus": "^1.8.2",
  44.         "imask": "^6.6.1",
  45.         "immer": "^9.0.1",
  46.         "jwt-decode": "^3.1.2",
  47.         "libphonenumber-js": "^1.10.30",
  48.         "lodash": "^4.17.21",
  49.         "lottie-react-native": "^5.1.6",
  50.         "mathjs": "^11.8.0",
  51.         "moment": "^2.29.4",
  52.         "moment-timezone": "^0.5.43",
  53.         "papaparse": "^5.4.1",
  54.         "polished": "^4.2.2",
  55.         "react": "18.2.0",
  56.         "react-country-flag": "^3.1.0",
  57.         "react-custom-scrollbars-2": "^4.5.0",
  58.         "react-dnd": "^16.0.1",
  59.         "react-dnd-html5-backend": "^16.0.1",
  60.         "react-dom": "18.2.0",
  61.         "react-excel-renderer": "^1.1.0",
  62.         "react-imask": "^6.6.1",
  63.         "react-is": "18.2.0",
  64.         "react-loading-skeleton": "^3.3.1",
  65.         "react-markdown": "^8.0.7",
  66.         "react-medium-image-zoom": "^5.1.6",
  67.         "react-native": "0.72.3",
  68.         "react-native-animatable": "^1.3.3",
  69.         "react-native-calendars": "^1.1294.0",
  70.         "react-native-code-push": "^8.0.1",
  71.         "react-native-document-picker": "^8.1.4",
  72.         "react-native-flipper": "^0.184.0",
  73.         "react-native-floating-action": "^1.22.0",
  74.         "react-native-gesture-handler": "^2.9.0",
  75.         "react-native-get-random-values": "^1.8.0",
  76.         "react-native-gleapsdk": "^9.0.4",
  77.         "react-native-image-picker": "^5.3.1",
  78.         "react-native-keyboard-accessory": "^0.1.16",
  79.         "react-native-linear-gradient": "^2.6.2",
  80.         "react-native-mask-input": "^1.2.3",
  81.         "react-native-modal-datetime-picker": "^14.0.1",
  82.         "react-native-orientation-locker": "^1.5.0",
  83.         "react-native-paper": "^5.4.1",
  84.         "react-native-pell-rich-editor": "^1.9.0",
  85.         "react-native-plotly": "^6.0.0",
  86.         "react-native-ratings": "^8.1.0",
  87.         "react-native-reanimated": "^3.3.0",
  88.         "react-native-render-html": "^6.3.4",
  89.         "react-native-safe-area-context": "^4.5.0",
  90.         "react-native-screens": "^3.20.0",
  91.         "react-native-shake": "github:vinaythakurcn/react-native-shake",
  92.         "react-native-skeleton-placeholder": "^5.2.4",
  93.         "react-native-svg-flagkit": "^0.9.5",
  94.         "react-native-toast-message": "^2.1.6",
  95.         "react-native-vector-icons": "^9.2.0",
  96.         "react-native-walkthrough-tooltip": "github:vinaythakurcn/react-native-walkthrough-tooltip",
  97.         "react-native-webview": "^11.26.1",
  98.         "react-native-wheel-color-picker": "^1.2.0",
  99.         "react-pdf": "^6.2.2",
  100.         "react-plotly.js": "^2.6.0",
  101.         "react-popper": "^2.3.0",
  102.         "react-redux": "^8.0.5",
  103.         "react-responsive-modal": "^6.4.1",
  104.         "react-style-proptype": "^3.2.2",
  105.         "react-toastify": "^9.1.2",
  106.         "react-transition-group": "^4.4.5",
  107.         "react-use": "^17.4.0",
  108.         "redux-flipper": "^2.0.2",
  109.         "redux-persist": "^6.0.0",
  110.         "redux-sentry-middleware": "^0.2.2",
  111.         "redux-thunk": "^2.4.2",
  112.         "rehype-katex": "^6.0.3",
  113.         "remark-gfm": "^3.0.1",
  114.         "remark-math": "^5.1.1",
  115.         "rn-fetch-blob": "^0.12.0",
  116.         "sanitize-html": "^2.10.0",
  117.         "sparser": "^1.4.12",
  118.         "striptags": "^3.2.0",
  119.         "styled-components": "5.3.6",
  120.         "tslib": "^2.3.0",
  121.         "use-debounce": "^9.0.4",
  122.         "uuid": "^9.0.0",
  123.         "zod": "^3.21.4"
  124.     },
  125.     "devDependencies": {
  126.         "@babel/core": "^7.14.5",
  127.         "@babel/preset-react": "^7.14.5",
  128.         "@commitlint/cli": "^17.0.0",
  129.         "@commitlint/config-conventional": "^17.0.0",
  130.         "@jscutlery/semver": "^3.0.0",
  131.         "@nx/cypress": "16.1.4",
  132.         "@nx/detox": "16.7.1",
  133.         "@nx/eslint-plugin": "16.1.4",
  134.         "@nx/jest": "16.7.1",
  135.         "@nx/js": "16.7.1",
  136.         "@nx/linter": "16.1.4",
  137.         "@nx/react": "16.1.4",
  138.         "@nx/react-native": "^16.7.1",
  139.         "@nx/storybook": "^16.4.0",
  140.         "@nx/web": "16.4.0",
  141.         "@nx/webpack": "16.1.4",
  142.         "@nx/workspace": "16.1.4",
  143.         "@originjs/vite-plugin-commonjs": "^1.0.3",
  144.         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
  145.         "@react-native-community/cli": "11.3.5",
  146.         "@react-native-community/cli-platform-android": "11.3.5",
  147.         "@react-native-community/cli-platform-ios": "11.3.5",
  148.         "@react-native/metro-config": "^0.72.9",
  149.         "@storybook/addon-essentials": "7.0.23",
  150.         "@storybook/addon-jest": "^7.0.24",
  151.         "@storybook/addon-links": "^7.0.24",
  152.         "@storybook/addon-ondevice-actions": "^6.5.3",
  153.         "@storybook/addon-ondevice-backgrounds": "^6.5.3",
  154.         "@storybook/addon-ondevice-controls": "^6.5.3",
  155.         "@storybook/addon-ondevice-notes": "^6.5.3",
  156.         "@storybook/core-common": "^7.0.9",
  157.         "@storybook/core-server": "7.0.23",
  158.         "@storybook/react": "^7.0.10",
  159.         "@storybook/react-native": "^6.5.3",
  160.         "@storybook/react-vite": "7.0.23",
  161.         "@storybook/testing-react": "^2.0.0",
  162.         "@svgr/webpack": "^6.1.2",
  163.         "@swc/cli": "~0.1.62",
  164.         "@swc/core": "~1.3.51",
  165.         "@testing-library/jest-dom": "^5.17.0",
  166.         "@testing-library/jest-native": "5.4.2",
  167.         "@testing-library/react": "14.0.0",
  168.         "@testing-library/react-native": "12.1.2",
  169.         "@testing-library/user-event": "^14.4.3",
  170.         "@types/humanize-plus": "^1.8.0",
  171.         "@types/jest": "^29.5.3",
  172.         "@types/node": "18.14.4",
  173.         "@types/papaparse": "^5.3.7",
  174.         "@types/react": "18.0.28",
  175.         "@types/react-dom": "18.0.11",
  176.         "@types/react-is": "17.0.3",
  177.         "@types/react-native": "0.72.2",
  178.         "@types/redux-mock-store": "^1.0.3",
  179.         "@types/redux-sentry-middleware": "^0.2.2",
  180.         "@types/styled-components": "5.1.26",
  181.         "@types/styled-components-react-native": "^5.2.1",
  182.         "@typescript-eslint/eslint-plugin": "^5.58.0",
  183.         "@typescript-eslint/parser": "^5.58.0",
  184.         "@welldone-software/why-did-you-render": "^7.0.1",
  185.         "abortcontroller-polyfill": "^1.7.5",
  186.         "axios-mock-adapter": "^1.21.4",
  187.         "babel-jest": "^29.6.1",
  188.         "babel-plugin-styled-components": "1.10.7",
  189.         "commitizen": "^4.3.0",
  190.         "cypress": "^12.11.0",
  191.         "cz-conventional-changelog": "^3.3.0",
  192.         "detox": "^20.11.1",
  193.         "eslint": "~8.15.0",
  194.         "eslint-config-prettier": "8.1.0",
  195.         "eslint-plugin-cypress": "^2.10.3",
  196.         "eslint-plugin-import": "2.27.5",
  197.         "eslint-plugin-jsx-a11y": "6.7.1",
  198.         "eslint-plugin-react": "7.32.2",
  199.         "eslint-plugin-react-hooks": "4.6.0",
  200.         "genversion": "^3.1.1",
  201.         "husky": "^8.0.3",
  202.         "isomorphic-fetch": "^3.0.0",
  203.         "javascript-obfuscator": "^4.0.2",
  204.         "jest": "^29.6.1",
  205.         "jest-circus": "^29.4.1",
  206.         "jest-environment-jsdom": "^29.6.1",
  207.         "jest-fetch-mock": "^3.0.3",
  208.         "jest-react-native": "18.0.0",
  209.         "jest-styled-components": "^7.1.1",
  210.         "lint-staged": "^13.2.2",
  211.         "metro": "0.76.7",
  212.         "metro-babel-register": "0.76.7",
  213.         "metro-config": "0.76.7",
  214.         "metro-react-native-babel-preset": "0.76.7",
  215.         "metro-react-native-babel-transformer": "0.76.7",
  216.         "metro-resolver": "0.76.7",
  217.         "msw": "^1.2.1",
  218.         "node-fetch": "^2.6.12",
  219.         "nx": "16.1.4",
  220.         "nx-cloud": "latest",
  221.         "prettier": "^2.6.2",
  222.         "react-native-svg": "13.9.0",
  223.         "react-native-svg-transformer": "1.0.0",
  224.         "react-refresh": "^0.10.0",
  225.         "react-test-renderer": "18.2.0",
  226.         "redux-devtools-extension": "^2.13.9",
  227.         "redux-mock-store": "^1.5.4",
  228.         "ts-jest": "^29.1.0",
  229.         "ts-node": "10.9.1",
  230.         "typescript": "~5.0.2",
  231.         "url-loader": "^4.1.1",
  232.         "vite": "^4.3.4",
  233.         "webpack-merge": "^5.9.0",
  234.         "webpack-obfuscator": "^3.5.1"
  235.     },
  236.     "lint-staged": {
  237.         "packages/**/src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
  238.         "packages/**/src/**/*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  239.     },
  240.     "config": {
  241.         "commitizen": {
  242.             "path": "./node_modules/cz-conventional-changelog"
  243.         }
  244.     },
  245.     "overrides": {
  246.         "@storybook/addon-actions": "7.0.23",
  247.         "@storybook/addon-controls": "7.0.23"
  248.     }
  249. }

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

react-native

2条答案

按热度按时间
8qgya5xd

8qgya5xd1#

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

  1. import React, { useCallback, useMemo, useRef, memo, useState } from 'react';
  2. import BottomSheet from '@gorhom/bottom-sheet';
  3. import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
  4. import { ch, cw } from '../../utils/DimensionsStyles';
  5. import { ThemeConfig } from 'tailwindcss/types/config';
  6. import { theme } from '../../../tailwind.config';
  7. import useBottomSheetStore from '../../stores/bottomSheet';
  9. type BottomSheetProps = {
  10.   children?: React.ReactNode;
  11. };
  13. const { colors } = theme?.extend as ThemeConfig;
  15. const styles = StyleSheet.create({
  16.   line: {
  17.     width: cw(75),
  18.     height: ch(4),
  19.     backgroundColor: colors['primary'],
  20.     alignSelf: 'center',
  21.     marginTop: ch(15),
  22.     marginBottom: ch(25),
  23.     borderRadius: 2,
  24.   },
  25. });
  27. const CustomBottomSheet = ({ children }: BottomSheetProps) => {
  28.   const { bottomSheet, setBottomSheet } = useBottomSheetStore(state => state);
  29.   const [bottomSpace, setBottomSpace] = useState(0);
  31.   const MAX_TRANSLATE_Y =
  32.     Platform.OS === 'ios'
  33.       ? bottomSheet.height?.ios + '%'
  34.       : bottomSheet.height?.android + '%';
  36.   const snapPoints = useMemo(
  37.     () => [
  38.       '10%',
  39.       '20%',
  40.       '30%',
  41.       '40%',
  42.       '50%',
  43.       '60%',
  44.       '70%',
  45.       '80%',
  46.       '90%',
  47.       '100%',
  48.     ],
  49.     [],
  50.   );
  52.   const handleComponent = () => {
  53.     return (
  54.       <TouchableOpacity testID="top-line-button" onPress={handleMove}>
  55.         <View style={styles.line} />
  56.       </TouchableOpacity>
  57.     );
  58.   };
  60.   const sheetRef = useRef<any>(null);
  62.   const handleMove = () => {
  63.     if (bottomSheet.indexBottomSheet > 1) {
  64.       sheetRef.current?.collapse();
  66.       setBottomSheet({
  67.         ...bottomSheet,
  68.         showBottomSheet: false,
  69.         indexBottomSheet: 1,
  70.         zIndex: -1,
  71.       });
  73.       switch (bottomSheet.component) {
  74.         case 'Daily':
  75.           Platform.OS === 'ios' ? setBottomSpace(20) : setBottomSpace(4);
  76.           break;
  77.         case 'Monthly':
  78.           Platform.OS === 'ios' ? setBottomSpace(34) : setBottomSpace(38);
  80.           break;
  81.         case 'Range':
  82.           Platform.OS === 'ios' ? setBottomSpace(0) : setBottomSpace(-20);
  84.           break;
  85.       }
  86.     } else {
  87.       sheetRef.current?.expand();
  88.       setBottomSheet({
  89.         ...bottomSheet,
  90.         showBottomSheet: true,
  91.         indexBottomSheet: 9,
  92.         zIndex: 1,
  93.       });
  94.       setBottomSpace(0);
  95.     }
  96.   };
  98.   const handleSheetChange = useCallback(index => {
  99.     setBottomSheet({
  100.       ...bottomSheet,
  101.       indexBottomSheet: index,
  102.       showBottomSheet: index > 0 ? true : false,
  103.       zIndex: index > 0 ? 1 : -1,
  104.     });
  105.   }, []);
  107.   return (
  108.     <View
  109.       style={{
  110.         position: 'absolute',
  111.         width: '100%',
  112.         bottom: ch(bottomSpace),
  113.         height: MAX_TRANSLATE_Y,
  114.         zIndex: bottomSheet.zIndex,
  115.       }}
  116.       testID="bottom-sheet"
  117.     >
  118.       <BottomSheet
  119.         ref={sheetRef}
  120.         index={bottomSheet.indexBottomSheet}
  121.         snapPoints={snapPoints}
  122.         overDragResistanceFactor={0}
  123.         handleComponent={handleComponent}
  124.         onChange={handleSheetChange}
  125.         backgroundStyle={{ borderRadius: 0 }}
  126.       >
  127.         {children}
  128.       </BottomSheet>
  129.     </View>
  130.   );
  131. };
  133. export default memo(CustomBottomSheet);

字符串
My utils尺寸：

  1. import {
  2.   widthPercentageToDP as wp,
  3.   heightPercentageToDP as hp,
  4. } from 'react-native-responsive-screen';
  6. const layoutScreenWidth = 375;
  7. const layoutScreenHeight = 812;
  9. export const cw = (pixels: number) => {
  10.   const proportion = (pixels / layoutScreenWidth) * 100;
  11.   return wp(proportion);
  12. };
  14. export const ch = (pixels: number) => {
  15.   const proportion = (pixels / layoutScreenHeight) * 100;
  16.   return hp(proportion);
  17. };

型
我的商店与zustand：

  1. import { create } from 'zustand';
  3. export type BottomSheet = {
  4.   showBottomSheet: boolean;
  5.   component: string;
  6.   indexBottomSheet: number;
  7.   height?: {
  8.     ios?: number;
  9.     android?: number;
  10.   };
  11.   zIndex?: number;
  12. };
  14. export type BottomSheetState = {
  15.   bottomSheet: BottomSheet;
  16.   setBottomSheet: ({
  17.     showBottomSheet,
  18.     indexBottomSheet,
  19.     component,
  20.     height,
  21.     zIndex,
  22.   }: BottomSheet) => void;
  23.   resetBottomSheet: () => void;
  24. };
  26. const useBottomSheetStore = create<BottomSheetState>()(set => ({
  27.   bottomSheet: {
  28.     showBottomSheet: false,
  29.     component: 'Monthly',
  30.     indexBottomSheet: 0,
  31.     height: {
  32.       ios: 65,
  33.       android: 55,
  34.     },
  35.     zIndex: -1,
  36.   } as BottomSheet,
  38.   setBottomSheet: (bottomSheet: BottomSheet) =>
  39.     set((state: BottomSheetState) => ({
  40.       bottomSheet: {
  41.         ...state.bottomSheet,
  42.         ...bottomSheet,
  43.       },
  44.     })),
  45.   resetBottomSheet: () =>
  46.     set(() => ({
  47.       bottomSheet: {
  48.         showBottomSheet: false,
  49.         component: 'Monthly',
  50.         indexBottomSheet: 0,
  51.         height: {
  52.           ios: 65,
  53.           android: 55,
  54.         },
  55.         zIndex: -1,
  56.       },
  57.     })),
  58. }));
  60. export default useBottomSheetStore;

型


的数据

展开查看全部
赞(0）分享  回复(0）举报  2023-11-21
4urapxun

4urapxun2#

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

赞(0）分享  回复(0）举报  2023-11-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com