使用“gorhom/bottom-sheet” React Native，Hooks只能在函数组件体内调用

发布于 2025-01-17 06:13:28 字数 1246 浏览 0 评论 0原文

我有一个 in React Native，它无法调用 gorhom/bottom-sheet 的函数组件并导入到另一个组件。下面是我的代码和错误。

函数组件

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

const BottomModal = () => {
  const snapPoints = useMemo(() => ['25%', '50%'], []);

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

  // variables

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <Button
          onPress={handlePresentModalPress}
          title="Present Modal"
          color="black"
        />
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}>
          <View style={styles.contentContainer}>
            <Text>Awesome

原文

I'm having a in react native which cannot call function component of gorhom/bottom-sheet and import to another component. Below is my code and error.

Function Component

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

const BottomModal = () => {
  const snapPoints = useMemo(() => ['25%', '50%'], []);

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

  // variables

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <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>
    </BottomSheetModalProvider>
  );
};

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

export default BottomModal;

Import it to use in another function component

          <TouchableOpacity onPress={BottomModal}>
            <Icon
              size={28}
              style={{marginRight: 20, color: Colors.grey2, marginTop: 16}}
              name="calendar-outline"
            />
          </TouchableOpacity>

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happend for one of the following reasons

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晨光如昨 2025-01-24 06:13:28

TouchableOpacity 的 onPress 函数似乎是一个问题。使用某种状态来相应地显示或隐藏 BottomModel

const [isBottomModalOpen, setIsBottomModalOpen] = useState(false);

然后对于 Touchable Opacity 将状态设置为 true 并渲染 Modal

<TouchableOpacity onPress={BottomModal}>
    <Icon
      size={28}
      style={{marginRight: 20, color: Colors.grey2, marginTop: 16}}
      name="calendar-outline"
    />
</TouchableOpacity>

然后如果 setIsBottomModalOpen 状态设置为 true，则有条件地渲染 Modal

The onPress function for the TouchableOpacity seems to be a problem here. Use some state to show or hide the BottomModel accordingly

const [isBottomModalOpen, setIsBottomModalOpen] = useState(false);

And then for the Touchable Opacity you set the state to be true and render the Modal

<TouchableOpacity onPress={BottomModal}>
    <Icon
      size={28}
      style={{marginRight: 20, color: Colors.grey2, marginTop: 16}}
      name="calendar-outline"
    />
</TouchableOpacity>

And then render the Modal conditionally if the setIsBottomModalOpen state is set to true

回复收藏 0 原文

~没有更多了~