javascript - 在 Modal 中传递函数时 React Native "onPress is not a function"

Question

当按下模式中的按钮时，我试图让模式可见标志变为假。当按下屏幕上的按钮时，我能够让模态变得可见。但是，当我使用类似的代码使不可见时，出现以下错误:

类型错误:onPress 不是函数。 (在'onPress(event)'中，'onPress'是Object的一个实例)

我认为问题在于 <CreatorModal onPressClose={() => setCreatorModalVisible(false)} />和 <TouchableOpacity onPress={onPressClose}>

我是 Javascript、React 和 React Native 的新手，所以我很迷茫有人能帮我弄清楚为什么会这样并提供解决方案吗？

我在下面附上了我的代码:

videoCard.js

import React, { useState } from "react";

import { useWindowDimensions, Modal } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import style from "styled-components/native";

import Colors from "./colors";
import VideoPlayer from "./videoPlayer";
import VideoElements from "./videoElements";
import CreatorModal from "./creatorModal";

const Gradient = style((props) => <LinearGradient {...props} />)`
    height: 100%;
    width: 100%;
    justifyContent: center;
    alignItems: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    zIndex: 1;
`;

const VideoContainer = style.View`
    backgroundColor: ${Colors.darkGrey};
    justifyContent: center;
    alignItems: flex-end;
`;

const VideoCard = ({ card, isPlay }) => {
    const [creatorModalVisible, setCreatorModalVisible] = useState(false);

    const width = useWindowDimensions().width;
    const height = useWindowDimensions().height;

    return (
        <VideoContainer style={{ height: height, width: width }}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={creatorModalVisible}
            >
                <CreatorModal
                    onPressClose={() => setCreatorModalVisible(false)}
                />
            </Modal>
            <VideoPlayer
                video={card.video.video}
                isPlay={isPlay}
                orientation={card.video.orientation}
            />
            <Gradient
                locations={[0, 0.25, 0.75, 1]}
                colors={[
                    "rgba(35,35,35,1)",
                    "rgba(35,35,35,0)",
                    "rgba(35,35,35,0)",
                    "rgba(35,35,35,1)",
                ]}
            >
                <VideoElements
                    creator={card.creator}
                    product={card.product}
                    brand={card.brand}
                    onPressCreator={() => setCreatorModalVisible(true)}
                />
            </Gradient>
        </VideoContainer>
    );
};

export default VideoCard;

videoElements.js

import React from "react";

import { Image, Text, View, Modal } from "react-native";
import style from "styled-components/native";
import { Feather } from "@expo/vector-icons";

import Colors from "./colors";

const Container = style.View`
    flexDirection: row;
    justifyContent: space-between;
    alignItems: flex-end;
    width: 100%;
    height: 100%
`;

const LeftContainer = style.View`
    flexDirection: column;
    justifyContent: flex-end;
    width: 50%;
    left: 1%;
    bottom: 10%;
`;

const RightContainer = style.View`
    flexDirection: column;
    justifyContent: flex-end;
    alignItems: center;
    width: 20%;
    right: 1%;
    bottom: 10%;
`;

const Element = style.TouchableOpacity`
    flexDirection: column;
    justifyContent: center;
    alignItems: center;
    height: 45px;
    shadowColor: ${Colors.darkGrey};
    shadowOpacity: 1;
    shadowRadius: 10px;
`;

const BasicText = style.Text`
    font-size: 12px
    fontFamily: Helvetica;
    color: ${Colors.white};
    textShadowRadius: 1px;
    textShadowColor: ${Colors.darkGrey};
`;

const BigBoldText = style(BasicText)`
    font-size: 15px;
    fontWeight: bold;
`;

const ElementText = style(BasicText)`
    font-size: 10px;
    fontWeight: bold;
`;

const VideoElements = ({ creator, product, brand, onPressCreator }) => {
    return (
        <Container>
            <LeftContainer>
                <BasicText>{brand.name}</BasicText>
                <BigBoldText>{product.name}</BigBoldText>
                <BasicText>$ {product.price}</BasicText>
            </LeftContainer>
            <RightContainer>
                {creator !== undefined && (
                    <Element onPress={onPressCreator}>
                        <Feather name="user" size={20} color="white" />
                        <ElementText>@{creator.username}</ElementText>
                    </Element>
                )}
                <Element>
                    <Feather name="arrow-up-circle" size={20} color="white" />
                    <ElementText>Product</ElementText>
                </Element>
            </RightContainer>
        </Container>
    );
};

export default VideoElements;

creatorModal.js

import React, { useState } from "react";

import { Image, Text, View, TouchableOpacity } from "react-native";
import style from "styled-components/native";

import Colors from "./colors";

const Container = style.View`
    flexDirection: column;
    justifyContent: center;
    alignItems: center;
    width: 100%;
    height: 100%;
`;

const ModalContainer = style.View`
    backgroundColor: ${Colors.white};
    width: 100%;
    height: 40%;
`;

const creatorModal = (onPressClose) => {
    return (
        <Container>
            <ModalContainer>
                <Text>Creator</Text>
                <TouchableOpacity onPress={onPressClose}>
                    <Text>Close</Text>
                </TouchableOpacity>
            </ModalContainer>
        </Container>
    );
};

export default creatorModal;

Answer 1

在将 onPressClose 作为对象传递后，使用 creatorModal 源代码的小型应用程序输出:

const creatorModal = ({onPressClose}) => {
//pass object here ______^^^^^^^^^    
return (
        <Container>
            <ModalContainer>
                <Text>Creator</Text>
                <TouchableOpacity onPress={onPressClose}>
                    <Text>Close</Text>
                </TouchableOpacity>
            </ModalContainer>
        </Container>
    );
};

export default creatorModal;

这是工作示例:Expo Snack

或者，您可以保持 creatorModal.js 不变，并对 videoCard.js 进行以下更改:

<Modal
    animationType="slide"
    transparent={true}
    visible={creatorModalVisible}>
        {CreatorModal(() => setCreatorModalVisible(false))}
        //call it as a simple function ____^^^^^^^^^^^^^^^
 </Modal>