使用‘gorhom/底部工作表’React本机，只能在函数组件的主体内调用钩子。

Question

我有一个import本机，它不能调用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 </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;

导入它以用于另一个功能组件

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

错误无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一

Answer 1

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

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

然后，对于可触摸的不透明度，您将状态设置为true并呈现Modal。

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

然后，如果setIsBottomModalOpen状态设置为true，则有条件地呈现Modal。