>source

모달 내의 버튼을 눌렀을 때 모달 표시 플래그가 거짓으로 바뀌도록 노력하고 있습니다. 화면의 버튼을 누르면 모달이 보이게 할 수있었습니다. 그러나 유사한 코드를 사용하여 표시되지 않으면 다음 오류가 발생합니다.

TypeError : 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;

  • 답변 # 1

    사용하는 작은 샘플 앱 출력 creatorModal 통과 후 소스 코드 onPressClose 객체로 :

    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>
    
    

  • 이전 html - 페이지의 나머지 부분과 중복 목록
  • 다음 python - modulenotfounderror - 'flake8'이라는 모듈이 없습니다