팝업 다이얼로그 ver1

import React, { Component } from 'react';
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    Image,
    Dimensions,
    Animated,
    Linking
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import Util_String from '../Utils/Util_String'
import AsyncStorage from '@react-native-async-storage/async-storage';
import API from '../Utils/API'

const height = (Dimensions.get('window').height) * 0.8 // X 버튼 높이 30
const width =  Dimensions.get('window').width
const btn_layout_height = 85
const content_height = height-btn_layout_height// X 버튼 높이 30

const radius = 15

class PopUp_Dialog extends Component {

    constructor(props) {
        super(props)

        let data = props.route.params.data == undefined? null: props.route.params.data
        let b_data = data == null ? null : data.b_data  
        let b_type = data == null ? null : data.b_type  

        //console.log("params : ",props.route.params)
        props.navigation.setOptions({
            headerShown: false,
            cardOverlayEnabled: true,
            cardStyle: {
                backgroundColor: 'transparent',
            },
            cardStyleInterpolator: ({ current: { progress } }) => ({
                cardStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 0.5, 0.9, 1],
                        outputRange: [0, 0.25, 0.7, 1],
                    }),
                },
                overlayStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                        extrapolate: 'clamp',
                    }),
                },
            }),
        });

        this.state = {
            data,
            image_hight: 0,
            b_data,
            b_type, // 0 : 외부링크  1: 앱내이동 ( 포트폴리오 )  2: ( 테마 )
        }
    }

    click(mode) {
        if (mode == 1) {
            // 쉐어드에 저장
            // 날짜 저장
            let today = Util_String.get_today_date('')
            this.save_local(today)
        }
        this.props.navigation.goBack()
    }

    async save_local(today) {
        let data = {
            today: today,
        }
        try {
            let datas = JSON.stringify(data)
            AsyncStorage.setItem(API.Pop_AS_key, datas)

        } catch (e) {
            console.log(" Async Storaage 저장 에러" + e)
        }
    }

    goto_link() {
        const { b_type, b_data, data } = this.state
        // console.log("b_data : ",b_data)
        //console.log("data : ",data)
        if (b_type != null && b_type == '0') {
            if (b_data.link_url == 'https://' || b_data.link_url == '') {

            } else {
                Linking.openURL(b_data.link_url);
            }
        } else {
            this.props.route.params.callback(data)
        }
    }

    resize_Image(data) {
        // console.log(data.nativeEvent.source)
        let image_h = height
        let layout_h = 0
        if (height < data.nativeEvent.source.height) {
            //console.log("이미지가 큰경우")
            // 이미지가 큰경우 
            image_h = data.nativeEvent.source.height
            layout_h = height
        } else {
            //console.log("이미지가 작은")
            image_h = data.nativeEvent.source.height
            layout_h = data.nativeEvent.source.height
        }
        this.setState({
            image_hight: image_h,
            layout_h: layout_h,
        })
    }


    render() {
        const {  b_data, image_hight, layout_h } = this.state
        return (
           
                <View
                    style={style.d_background}
                    activeOpacity={1}
                >
                    <View
                        style={{ ...style.d_layout, height: height }}>

                        <TouchableOpacity
                            style={{ height: 20, marginBottom: 10, backgroundColor: 'transparent', alignItems: 'flex-end' }}
                            activeOpacity={1}
                            onPress={() => this.click(2)}
                        >
                            <Image
                                style={{ height: 15, width: 15 }}
                                source={require('../images/icons/btn_close.png')}
                            />
                        </TouchableOpacity>

                        <View style={{
                            height: content_height,
                            backgroundColor: 'white',
                            alignItems: 'center',
                            justifyContent: 'flex-end',
                            borderRadius:radius,
                            overflow:'hidden'
                        }}>

                            <ScrollView 
                                style= {{ borderRadius:radius}}
                                showsVerticalScrollIndicator = {false}
                            >
                                <View style={{ height: image_hight,  }}>
                                    <Image
                                        onLoad={(e) => this.resize_Image(e)}
                                        // style={{ height: image_hight,  width: undefined , aspectRatio: 3 / 4  , backgroundColor:'transparent'}}
                                        style={{ height: image_hight, width: width*0.8}}
                                        source={require('../images/guide/10_02_03_회원가입완료.jpg')}
                                        resizeMode ='cover'
                                    />
                                </View>

                            </ScrollView>

                            <TouchableOpacity
                                activeOpacity={1}
                                style={{ ...style.btn_1, height: btn_layout_height / 2 }}
                                onPress={() => this.goto_link()}
                            >
                                <Text style={style.text_btn1}>자세히보기</Text>
                            </TouchableOpacity>

                        </View>

                        <TouchableOpacity
                            activeOpacity={1}
                            style={style.btn_2}
                            onPress={() => this.click(1)}
                        >
                            <Text style={style.text_btn2}>오늘 안보기</Text>
                        </TouchableOpacity>
                    </View>
                </View>
        )
    }
}

const style  = StyleSheet.create({
    
    d_background : {
        flex: 1,
        width: width,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00000080',
    },

    d_layout : {
        width: width*0.8,
        backgroundColor: 'transparent',
        overflow: 'hidden',
    },

    btn_1:{
        position:'absolute',
        justifyContent: 'center', 
        alignItems: 'center',
        backgroundColor: "#375fd8",
        borderRadius:5,
        width:'80%',
        bottom:30
    },

    btn_2:{
        height: btn_layout_height/2 ,
        marginTop: 15,
        backgroundColor: 'transparent',
        justifyContent:'center',
        alignItems:'center'
    },

    text_btn1:{
        color: "white"
    },

    text_btn2:{
        color: "white",
        textDecorationLine: 'underline'
    }

})

export default PopUp_Dialog