map함수 돌리는 화면에서 onPress로 경로열기 (Flatlist완성으로 보류)

이번엔 전에 했던 방식인

[ 부모컴포넌트에서 json데이터를 받아 map함수를 돌려 리스트를 작성하고, 리스트에 들어갈 Card.js라는 자식 컴포넌트를 onPress로 반응함으로서 경로는 여는 방식 ]과 다르게

부모컴포넌트에서 onPress 반응을 받아 경로를 여는 방식을 구현했다. (3일을 공쳤다...)

 

우선 요약하자면,

 1. 자식컴포넌트에서 Card전체를 감쌌던 <TouchableOpacity>태그를 <view>태그로 대체해주고,

부모컴포넌트의 map함수 안에 있는 return값에 <TouchableOpacity>태그를 씌워준다.

 2. 그리고 <TouchableOpacity>안에 onPress를 넣음으로서 반응형 구현한다.

 3. onPress에 반응할 함수를 작성해준다.

 

장점 : Card.js라는 자식컴포넌트에선 url밖에 못연다. (즉, webView형식밖에 못연다는 얘기)

        그러나 이렇게 구동하면, 부모컴포넌트에서 link에 대한 밸류값을 json데이터로 부터 받기때문에,

        다른 자식 컴포넌트에 할당해줄 수 있다.

예시) 필자는 iframe 컴포넌트를 사용하고싶었다. 그런데 부모컴포넌트에 <iframe>태그와 <Card>태그로

        두 자식컴포넌트를 묶어놓은 상태다.

        즉, props특성상 형제 컴포넌트끼리 내부 인자인 {props}를 주고받을 수 없는 상태..

        따라서, <Card>안에 있던 {props}를 부모 컴포넌트에 다시 작성한 것이다.

 

사용방법

1. 기존 Card.js (자식컴포넌트)  >> 수정된 Card.js

  ㄱ. import해줬던 expo-linking을 없애주고, const했던 link함수도 없애준다.

  ㄴ. <TouchableOpacity>를 없애주고, <View>로 대체.

       <TouchableOpacity>에 있던 스타일 옵션은 <View>에 복붙해준다.

import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import * as Linking from 'expo-linking';

export default function YouCard({ content }) {

    const link = () => {
        Linking.openURL("https://www.youtube.com/watch?v=" + content.id.videoId)
    }

    return (
        <TouchableOpacity style={styles.card} onPress={() => link()}>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.snippet.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.snippet.description}</Text>
                <Text style={styles.cardDate}>{content.snippet.publishedAt}</Text>
            </View>
        </TouchableOpacity>
    )
}

import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";

export default function YouCard({ content }) {

    return (
        <View style={styles.card}>
            <Image style={styles.cardImage} source={{ uri: content.snippet.thumbnails.medium.url }} />
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.snippet.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.snippet.description}</Text>
                <Text style={styles.cardDate}>{content.snippet.publishedAt}</Text>
            </View>
        </View>
    )
}

 

2. 기존 부모컴포넌트.js >> 수정된 부모컴포넌트.js

  ㄱ. map함수 돌린 return문 안에 있는 <Card>태그를 <TouchableOpacity>태그로 감싸준다.

      * 위에 import한 react-native에 TouchableOpacity 심어주는거 잊지말자

  ㄴ. <TouchableOpacity>안에 onPress={( )=>( )}심어주자

  ㄷ. return문 상단에 onPress에 사용할 함수를 선언해주자.

      현재는 내가 원하는 밸류값이 JSON파일로부터 잘 받아지나 확인차 console.log로 함

  ㄹ. onPress문에 해당 frunction을 심어주자.

  ㅁ. 주의할 점은, 변수인 {content}를 넣어주는 위치다.

      const SendID = ( ) 괄호 안에 넣어준다.

      onPress안에 심은 SendID( ) 괄호 안에 넣어준다.

   * onPress{ ( ) 여기 괄호에 넣으면 오류뜬다.

   * console.log하여 JSON데이터로부터 밸류값을 얻기위해선 메인 key값 다음부터 입력하면 된다.

     <Card>와 마찬가지

    return (
        <ScrollView style={styles.container}>
            <View style={styles.cardContainer}>
                {
                    state.map((content, i) => {
                        return (<Card content={content} key={i} />)
                    })
                }
            </View>
        </ScrollView>
    );

const SendID = ({ content }) => {
        return (
            console.log(content.id.videoId)
        )
    }


    return (
        <ScrollView style={styles.container}>
            <SearchBar />
            {/* <SearchScreen /> */}
            <Iframe />
            <View style={styles.cardContainer}>
                {
                    state.map((content, i) => {
                        return (<TouchableOpacity onPress={() => SendID({ content })}><Card content={content} key={i} /></TouchableOpacity>)
                    })
                }
            </View>
        </ScrollView>
    );

 

3. 링크열기 (expo-linking사용 or iframe사용)

 

진행중...